角度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]); 
           }; 
         }); 
        }; 
       }; 

たびにサーバ3枚の画像を送信します。以前は私は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"> 

他のものはすべて同じにしておきます。これにより、画像の順番が確実に維持されます。