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>