NgRepeat未从更新的阵列更新

Question

我有一个应用程序，它获取一组数据（即400个对象）并将其存储在一个数组中。 在我看来，我正在创建一种无限滚动，基本上当页面加载时，它会插入5条记录。 然后我在底部有一个标记为更多的按钮，该按钮进入数据数组并将其切片为ngRepeat指令中使用的数组。

起初它开始工作，但总是失败。 该函数正在被触发但是ngRepeat的列表没有更新。

我的控制器示例是：

 function ActivityController($uibModal,$http,$q, UserService) {
        var vm = this;
        vm.activity = [];
        vm.activityData = [];
        vm.maxItems = 5;
        vm.getMoreData = getMoreData;
        function getMoreData(){
            vm.activityData = vm.activity.slice(0, vm.activityData.length + 5);
        }

        UserService.getUserActivity()
                .then(function (response) {
                    vm.activity = response.data;
                    vm.activityData = vm.activity.slice(0, 5);
                });
    }

视图：

 <ul class="list-group">
                <li ng-repeat="activity in activityCtrl.activityData | orderBy: 'date':false " class="list-group-item">
                    <p class="nm">
                        <i class="" aria-hidden="true"></i>
                        <strong>@{{ activity.user }}</strong> @{{ activity.operation }} @{{ activity.type }}  @{{ activity.name }} no Gestor</p>
                    <small class="text-muted">@{{ activity.diff}}</small>
                </li>
            </ul>
                <button ng-click="activityCtrl.getMoreData()">more</button>

Answer 1

尝试使用$scope.$evalAsync函数。

    function getMoreData(){
        $scope.$evalAsync(function(){
         vm.activityData = vm.activity.slice(0, vm.activityData.length + 5);
        })  
    }

演示

 var app = angular.module("app",[]); app.controller('MainCtrl', function($scope) { $scope.data =[{"name":"a","age":"25"},{"name":"b","age":"23"},{"name":"c","age":"21"},{"name":"d","age":"21"},{"name":"e","age":"22"}]; $scope.data2 =[]; $scope.updateData = function(){ var d = {"name":"newA","age":"25"}; $scope.$evalAsync(function(){ $scope.data.push(d); }) } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> <div ng-app="app" ng-controller="MainCtrl"> <input type="button" value="updateData" ng-click="updateData()" /> <table> <tr ng-repeat="d in data"> <td>{{d.name}}</td> <td>{{d.age}}</td> </tr> </table> </div> 

Answer 2

而不是消灭整个阵列。 你应该将下一个元素推入其中。

function ActivityController($uibModal,$http,$q, UserService) {
    var vm = this;

    angular.extend(vm, {
        activity: [],
        activityData: [],
        maxItems: 5,
        getMoreData: function () {
            var sizeToGo = vm.activityData.length + maxItems;
            for (var i = vm.activityData.length; i < sizeToGo && i < vm.activity.length; ++i) {
                vm.activityData.push(vm.activity[i]);
            }
        },
        onInit: function () {
            UserService.getUserActivity()
            .then(function (response) {
                vm.activity = response.data;
                vm.activityData = vm.activity.slice(0, 5);
            });
        }
    });

    vm.onInit();
}

您还应该在ng-repeat track by $index添加track by $index 。

<li ng-repeat="activity in activityCtrl.activityData track by $index | orderBy: 'date':false " class="list-group-item">
</li>

Answer 3

我认为你遇到的问题是重新分配vm.activityData而不是更新它的内容。

function ActivityController($uibModal,$http,$q, UserService, $scope) {
    var vm = this;
    vm.activity = [];
    vm.activityData = [];
    vm.maxItems = 5;
    vm.getMoreData = getMoreData;

    function getMoreData(){
        // add another 5 items
        $scope.$apply(function() {
            Array.prototype.push.apply(vm.activityData, vm.activity.slice(vm.activityData.length, 5));
        });
    }

    UserService.getUserActivity()
            .then(function (response) {
                vm.activity = response.data;
                // add the first 5 items
                Array.prototype.push.apply(vm.activityData, vm.activity.slice(0, 5));
            });
}

UPDATE

用$scope.$apply()包装了vm.activityData的更新$scope.$apply()