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

Question

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

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

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

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

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

这很好。

现在，我需要在点击一个按钮进入 html 后刷新视图页面。当我单击此按钮时，其中一个项目将从另一个 api 中删除。我可以调用相同的 api 并刷新数据（有开销），或者我可以在不调用 refresh-api 的情况下从 ctrl.items 中删除数据（如果删除 api 返回 200 状态代码）。

最好的解决方案是什么？如何在不调用 GetDataFromApi 函数的情况下通过控制器刷新重复对象？

谢谢？

Answer 1

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

通常，我将设置一个 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);
}());

然后，作为使用指令的示例，您将服务注入指令并将模型对象绑定到指令上的范围对象：

(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>

然后，如果您执行任何会修改集合的操作，只需调用服务函数来更新集合，您的视图应该会反映更新。