NgRepeat没有从更新的数组中更新

Question

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

起初它开始工作，但不是失败。该函数正在被解雇，但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

消灭整个阵列的替代。你应该将下一个元素推入其中。

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。

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

Answer 2

我认为你遇到的问题是由重新分配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

包裹vm.activityData更新与$scope.$apply()

Answer 3

尝试使用$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>