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并刷新数据（带有开销），或者我可以从ctrl.items中删除数据，而无需调用refresh-api（如果删除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>

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

来自WebApi2 response.data

1 个答案: