Question

我是Angular的新手，我正在做一些原型设计。不幸的是，当我调用REST服务时，我遇到了显示数据的问题。控制台没有提供线索，因为没有错误返回。

HTML如下：

<!doctype html>
<html ng-app="statViewer">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Test Angular Page</title>

    <script  src="js/angular.min.js" type="text/javascript"></script>
    <script  src="js/statViewer.js" type="text/javascript"></script>

</head>
<body ng-controller="MainController">

    <h1> {{title}} </h1>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="stat in stats">
            <td>{{stat.MessageName}}</td>
            <td>{{stat.TypeCount}}</td>
        </tr>
    </tbody>
</table>


</body>
</html>

JS如下：

(function() {

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

    var MainController = function($scope, $http) {

        $scope.title = "Angular test page";

        $http.get("http://localhost:8080/API/getstats.json")
            .then(onStatsComplete);

        var onStatsComplete = function(response)
        {
            $scope.stats = response.data;
        };


    };

    app.controller("MainController", MainController);

}());

我看到正在调用该服务，因为在控制台窗口中它打印出该调用已被触发。调用REST API的结果如下：

[
    {
        "TypeCount": 45,
        "SentDate": "2014-08-20T00:00:00.000Z",
        "MessageName": "Message Type 1"
    }
]

Answer 1

在调用onStatsComplete后，您正在使用回调函数定义变量$http.get。因此，在您调用$http.get时，值undefined将传递给当时而不是您的回调函数。像这样交换线条：

var onStatsComplete = function(response) { $scope.stats = response.data; }; $http.get("http://localhost:8080/API/getstats.json") .then(onStatsComplete);

另请参阅this question，了解撰写var y = function(){...}和function y(){...}之间的区别。

Answer 2

为了提供更多见解，何时进行$ http.get电话。

每个$ http调用在angularJs中都是Aysncronous。

   $http.get("http://localhost:8080/API/getstats.json")
            .then(function(result){   
console.log(result.TypeCount);
               });

如果您仍然无法获取数据，请告诉我。

Angular.js并显示Rest JSON

2 个答案: