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

Posted 2023-02-23

【中文标题】来自 WebApi2 response.data 的 Angular ng-repeat 刷新

【英文标题】：Angular ng-repeat refresh from WebApi2 response.data

【发布时间】：2017-07-24 12:37:52

【问题描述】：

我创建了一个角度函数，可以从 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 函数的情况下通过控制器刷新重复对象？

谢谢？

【问题讨论】：

尝试使用$scope.$evalAsync(function() ctrl.items = response.data;)

我需要在点击一个按钮进入html后刷新视图页面你这是什么意思？

您可以直接从 ctrl.items 中对已删除的数据进行切片，或者在删除成功时调用 get 调用。

当我在视图中单击按钮时调用一个从数据库中删除项目的 api。然后，如果我收到 200 状态代码，我想从 ctrl.items 中删除项目，而不需要重新调用获取所有项目的 api（有开销）。比我想的...从 ctrl.items 中删除元素并更新视图。如果这不是正确的解决方案，我可以直接调用 get-all api。谢谢

【参考方案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>

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

【讨论】：

谢谢！我需要做的是从数据库中删除一个项目（调用 api）。如果状态码为 200，我不想重新调用 api 从数据库中获取所有元素，但我认为将其从本地集合中删除并自动刷新视图（在 ng-repeat 循环中）。谢谢

如果您使用的是 REST API，您的视图应该始终与 API 本身同步。如果执行删除，则应通过 API 完成，然后应通过 API 更新集合。这就是在服务中定义数据绑定对象的原因。视图不会“刷新”，它只是适应与服务交互导致的数据绑定变化。

好的。然后我使用api删除记录并通过api刷新。谢谢！

别担心！如果这满足您的问题，请标记为答案:)