NgRepeat未从更新的阵列更新

Question

I have an app that gets a collection of data (ie 400 objects) and stores it in an array. In my view I'm creating a kind of infinite scroll, that basically when the page loads, it insert 5 records. Then I have in the bottom a button labeled more that goes to the data array and slices it for the array that is being used in the ngRepeat directive.

At first it starts to work, but than keeps failing. The function is being fired but the list with ngRepeat isn't updating.

My controller example is:

 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);
                });
    }

View:

 <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

Try use $scope.$evalAsync function.

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

Demo

 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

Instead of wiping out your entire array. You should push the next elements into it.

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();
}

You should also add a track by $index in your ng-repeat .

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

Answer 3

I think the problem you are having is caused by re-assigning vm.activityData rather than updating it's contents.

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

Wrapped the updating of vm.activityData with $scope.$apply()