AngularJS ng-repeat在新数据进入时不更新视图

angularjs ng-repeat not updating view when new data comes in

本文关键字：新视图 更新 数据 ng-repeat 新数据 AngularJS      更新时间：2023-09-26

我有一个服务，它将调用服务器并返回数据。我正在将服务绑定到范围内的变量。

例：

  • 让服务DataModelService
  • 在控制器中：$scope.data = DataModelService
  • 在视图中<div ng-repeat="value in data.persons">{{value.name}}</div>

我的代码 ： 

This is how my code looks like:
/**DataModelService**/
factory('DataModelService', [
    'DataService',
    function (DataService) {
        var service;
        service = {
            changeState: function (params) {
                DataService.changePersonState(params)
                    .then(function (response) {
                        service.loadData(response.data);
                    });
            },
            loadData: function (responseData) {
                service.persons = responseData.persons;
            }
        }
        return service;
    }
]);
/**DataService**/
factory('DataService', ['$http',
    function ($http) {
        return {
            changePersonState: function (params) {
                return $http.post("url", params);
            }
        }
    }
]);

/**DataController**/
.controller('DataController', ['DataModelService',
    function (DataModelService) {
        $scope.data = DataModelService;
    }
]);
/

查看/

<div ng-repeat = "person in data.persons" >{{person.name}} </div>

在视图上，我正在对数据中的键进行 ng-repeat，即 ng-repeat="data.personss 中的值"而且我还可以选择将人员的状态更改为活动或非活动状态，因此每当我对人员的状态进行更改时，都会向服务器发送调用并将数据设置为服务，并且当它绑定到视图时，它应该自动更新数据。但是在我的情况下，ng-repeat并没有删除旧数据，而是将新数据附加到旧数据中。

对我来说，将承诺回调（then）写入服务中并不是好方法。因为在你的情况下，DataModelService会延迟一些延迟地返回数据，但不是承诺。我们不知道什么时候。

因此，使用其他方法添加基本$timeout并从服务中获取数据的方法。

所以我的建议是演示

和您的固定示例：演示2

如果我们以你为例，它应该是这样的：

.JS 

var fessmodule = angular.module('myModule', ['ngResource']);
fessmodule.controller('fessCntrl', function ($scope, DataModelService, $timeout) {
    $scope.alertSwap = function () {       
        DataModelService.changeState('ff');
        $timeout(function(){
         $scope.data = DataModelService.getResponse();
        }, 10);       
    }
});
fessmodule.$inject = ['$scope', 'Data', '$timeout'];

/**DataModelService**/
fessmodule.factory('DataModelService', [ 'DataService',function (DataService) {
     var value = [];
    var service = {
        changeState: function (params) {
           DataService.changePersonState(params)
                .then(function (response) {                   
                   value = response.persons;                  
            });
        },
        getResponse : function(){
           return value;
        }
    }
    return service;
}
]);
/**DataService**/
fessmodule.factory('DataService', ['$q',function ($q) {
    var data = {        // dummy 
        persons: [{
            name: "Bob"
        }, {
            name: "Mark"
        }, {
            name: "Kelly"
        }]
    };
    var factory = {
        changePersonState: function (selectedSubject) {
            var deferred = $q.defer();
            deferred.resolve(data);
            return deferred.promise;
        }
    }
    return factory;
} //function
]);
相关文章：