使用AngularJS访问json数据的问题

时间:2016-02-18 03:01:41

标签: angularjs json

我刚刚开始学习angularJS,并试图找出以下代码无效的原因

<html>
    <head>
        <title>Angular JS Ajax</title>
    </head>

    <body>
        <div ng-app="mainApp" ng-controller="studentController">
            <table>
                <tr>
                    <th>Name</th>

                    <th>Roll No</th>

                    <th>Percentage</th>
                </tr>

                <tr ng-repeat="student in students">
                    <td>{{ student.Name }}</td>

                    <td>{{student.RollNo}}</td>

                    <td>{{student.Percentage}}</td>
                </tr>
            </table>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

        <script>
            var mainApp = angular.module("mainApp");

            mainApp.controller("studentController", function($scope,$http){

                var url = "data.txt";

                $http.get(url).success(function(response){
                    $scope.students = response;
                });
            });
        </script>
    </body>
</html>

当我使用以下内容将ng-app的属性更改为""(而不是上面的"mainApp"'), and replace the`代码时,应用程序可以正常工作。 如果有人能向我解释为什么会这样,我真的很感激。

    <script>
        function studentController($scope, $http){
            var url = "data.txt";

            $http.get(url).success(function(response){
                $scope.students = response;
            });
        };
    </script>

这是data.txt文件:

[
    {
        "Name": "Mahesh Parashar",
        "RollNo": 101,
        "Percentage": "80%"
    },

    {
        "Name": "Dinkar Kad",
        "RollNo": 191,
        "Percentage": "75%"
    }
]

谢谢!

3 个答案:

答案 0 :(得分:1)

您忘记添加[] app模块声明

var mainApp = angular.module("mainApp",[]);

答案 1 :(得分:1)

第一个无效,因为您没有为mainApp提供正确的语法。您需要为模块声明添加[]。 这应该如下所示:

var mainApp = angular.module('mainApp', []);
    mainApp.controller('studentController', function($scope, $timeout) {
      var url = "data.txt";

      $http.get(url).success(function(response) {
          $scope.students = response;
      });
 });

第二个工作正常,因为你没有任何app模块声明。

答案 2 :(得分:0)

您需要将其解析为json对象 请尝试JSON.parse。

jsonObj = JSON.parse(response);

希望这会对你有所帮助