angularjs ng-repeat来自未显示资源的数据

时间:2015-07-09 09:53:48

标签: json angularjs ng-repeat angular-resource

我有一个简单的AngularJS应用程序,它使用$ resource获取RESTful API数据,麻烦的是一旦数据最终到达并且分配给我的$ scope,视图就不会更新。

因为我是AngularJS的新手,所以我的代码可能会出错!

我的服务:

(function () {
    'use strict';

    var taxYearApp = angular.module('taxYearApp');

    taxYearApp.factory('costService', ['$resource', 
        function ($resource) {
            var theUrl = 'http://localhost/taxcalculator/api/CostApi/';
            var CostResource = $resource(theUrl + ':taxYearID', { taxYearID: 'taxYearID' }, { 'update': { method: 'PUT' } });
            return {
                getCosts: function (taxYearID) {
                    return CostResource.query({ taxYearID: taxYearID });
                }
            };
        }
    ]);
})();

这是我的控制者:

(function () {
    "use strict";

    var taxYearApp = angular.module('taxYearApp');

    taxYearApp.controller('costController', ['$scope', 'costService',
            function ($scope, costService) {
                $scope.Costs = [];
                var taxYearID = 1;
                var promise = costService.getCosts(taxYearID);
                promise.$promise.then(function () {
                    $scope.Costs = [promise];
                });
            }]);
})();

我在这里尝试了一些不同的东西,但似乎没有任何效果,最初它只是$scope.Costs = costService.getCosts(taxYearID);

现在我至少可以看到$scope.Costs确实包含了我想要的数据数组,只是我的视图没有被刷新。

说到这里,我的观点是这样的:

    <div ng-controller='costController'>
        <div ng-repeat="Resource in Costs">
            <form name='item_{{$index}}_form' novalidate>
                <table>
                    <tr>
                        <td><h3>{{Resource.CostType}}</h3></td>
                        <td><input type="number" ng-model="Resource.CostAmount" required /></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

我将对象更改为&#39;资源&#39;这就是承诺似乎如何格式化JSON。

如果我手动请求webAPI,这是我回来的JSON:

[
    {
        "CostID": 1,
        "CostTitle": "Wage",
        "GrossAmount": 10001,
        "IsReadOnly": false
    },
    {
        "CostID": 2,
        "CostTitle": "Total Expenses",
        "GrossAmount": 3000,
        "IsReadOnly": false
    }
]

任何人都可以建议我做错了什么或如何用我的异步数据刷新$ scope?

1 个答案:

答案 0 :(得分:1)

您应该将$scope.Costs分配给.then()

中承诺返回的数据
taxYearApp.controller('costController', ['$scope', 'costService',
        function ($scope, costService) {
            ...
            promise.$promise.then(function (data) {
                $scope.Costs = data;
            });
        }]);