javascript - 来自 WebApi2 response.data 的 Angular ng-repeat 刷新

Question

我创建了一个 Angular 函数，可以从 WebApi 获取数据。此函数通过 $http.get 调用获取 json 格式的数据。

然后我从response.data对象接收数据。

    dataService.GetDataFromApi.then(
         function(response){
             ctrl.items = response.data; },
    function(error){});

在 html View 页面中，我使用 ng-repeat 显示response.data 中的所有项目。

<table>
    <tr ng-repeat="item in ControllerNama.items">
        <td>{{ item.name }}</td>
    </tr>
</table>

这工作正常。

现在，我需要在单击 html 按钮后刷新 View 页面。当我单击此按钮时，其中一个项目将从另一个 api 中删除。我可以调用相同的 api 并刷新数据(有开销)，或者我可以从 ctrl.items 中删除数据而不调用刷新 api(如果删除 api 返回 200 状态代码)。

最好的解决方案是什么？如何通过 Controller 刷新重复对象而不调用 GetDataFromApi 函数？

谢谢？

Answer 1

无需提供太多有关如何填充 ng-repeat 中迭代的集合的信息，我可以提供我通常如何处理与从 API 调用检索的集合的绑定(bind)。

通常，我会设置一个 Angular 服务，其中包含 API 调用的函数，以及具有表示数组的属性的对象。例如:

(function () {
    var apiSvc = function ($q, $http) {
        var
            model = function () {
                collection = [];

                return {
                    collection: collection
                };
            },
            getCollection = function () {
                var deferred = $q.defer();

                $http({
                    url: '/api/something/getCollection',
                    method: 'GET'
                }).success(function (data) {
                    model.collection = data;
                    deferred.resolve(data);
                }).error(function (err) {
                    // Do something if this fails
                });

                return deferred.promise;
            };

        return {
            model: model,
            getCollection: getCollection
        };
    };

    // Inject external angular modules into the service
    apiSvc.$inject = ['$q', '$http'];

    // Add the service to your angular module
    apiApp.factory('appSvc', appSvc);
}());

然后，作为使用指令的示例，您可以将服务注入(inject)到指令中，并将模型对象绑定(bind)到指令上的范围对象:

(function () {
    var apiDirective = function (apiSvc) {
        return {
            restrict: 'EA',
            replace: true,
            templateUrl: '/content/templates/demo-directive.html',
            link: function (scope) {
                scope.model = demoSvc.model;
                apiSvc.getCollection();
            }
        }
    };

    apiDirective.$inject = ['apiSvc'];
    apiApp.directive('apiDirective', apiDirective);
}());

并按如下方式迭代模板中的集合:

<div ng-repeat="item in model.collection track by $index">
    <p ng-bind="item.property"></p>
</div>

然后，如果您执行任何会修改集合的操作，只需调用服务函数来更新集合，您的 View 就会反射(reflect)更新。