Angular v1.4重複div而無需重新渲染已渲染的項目

Question

我編寫了代碼來重複圖像數組和加載更多按鈕到ajax請求並在該數組中推送響應圖像。但是每當新的迴應出現時，整個圖像就會重新洗牌。

<div class="container"> 
    <div ng-repeat="image in images track by $index"> 
     <div class="panel panel-default"> 
      <div> 
      <img ng-src="{{image.Src}}" alt="" height="200" width="200"> 
      </div> 
     </div> 
    </div> 
</div> 

在我的控制器代碼：

$scope.loadMore = function() { 
    pageNumber ++; 
    homeService.getListData(pageNumber) 
          .then(function (data) { 
           for (var i = 0; i < data.length; i++) { 
            $scope.images.push(data[i]); 
           }; 
         }); 
        }; 
       }; 

每次服務器發送三個圖像。以前我沒有使用track by $index，然後從from this SO answar我加了track by $index但沒有運氣。我想角是重新渲染整個數組。如果是這樣，我該如何停止這個重新渲染？

Answer 1

您可以使用Array.concat（）而不是推送所有元素，這可能會解決您的問題。

$scope.loadMore = function() { 
     pageNumber ++; 
     homeService.getListData(pageNumber) 
       .then(function (data) { 
        $scope.images = $scope.images.concat(data); 
       }); 
    }; 

Answer 2

很難說爲什麼角度重新排序你的圖像，因爲它看起來不像你的數組正在重新排序。

嘗試添加orderBy子句。像這樣的東西應該工作：

<div ng-repeat="image in images | orderBy : image.$index track by $index"> 

並保持一切都是一樣的。這將確保圖像的順序保持一致。