javascript - NgRepeat 没有从更新的数组更新

Question

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

起初它开始工作，但一直失败。正在触发该函数，但带有 ngRepeat 的列表未更新。

我的 Controller 示例是:

 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>