whitejy / learn

学习使用
0 stars 0 forks source link

AngularJS学习 #2

Closed whitejy closed 5 years ago

whitejy commented 7 years ago

ajax获取json数据,通过angular展示

<!DOCTYPE HTML>
<html ng-app="test">
    <head>
        <meta charset="UTF-8">
        <script src="F:/angular-1.4.1/angular.js"></script>
        <script src="./jquery.js"></script>
        <title>ajaxJSON</title>
    </head>
    <body ng-controller="testController">
        <div ng-repeat="per in obj">
            <p>{{per.name}}</p>
        </div>

        <script>
            var obj;
            var app = angular.module("test",[]);
            var jsonobj = $.ajax({
                async : false,
                type : "GET",
                url : "test.json", //使用http-server模拟服务
                dataType : "json",
                success :function(json){
                    obj = json;
                }
            });
            app.controller("testController",function($scope){
                $scope.obj = obj;
            })
        </script>
    </body>
</html>

test.json

[
    {
        "name":"zhangsan",
        "age":12,
        "school":"shenyang school"
    },
    {
        "name":"lisi",
        "age":13,
        "school":"dalian school"
    },
    {
        "name":"wangwu",
        "age":14,
        "school":"anshan school"
    },
    {
        "name":"maliu",
        "age":15,
        "school":"yingkou school"
    }
]