0

画像配列を繰り返し、さらに読み込みボタンを 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つの画像を送信するたびに。以前は、私が追加したこのSOアンサーからtrack by $index使用しませんでしたが、運がありませんでした。track by $index

angular は配列全体を再レンダリングしていると思います。もしそうなら、どうすればこの再レンダリングを止めることができますか?

4

2 に答える 2

0

すべての要素をプッシュする代わりに Array.concat() を使用できます。これにより、問題が解決する場合があります。

    $scope.loadMore = function () {
         pageNumber ++;
         homeService.getListData(pageNumber)
               .then(function (data) {
                  $scope.images = $scope.images.concat(data);
               });
    };
于 2017-01-09T20:31:48.060 に答える
0

配列が並べ替えられているようには見えないため、角度が画像を並べ替えている理由を言うのは難しいです。

orderBy 句を追加してみてください。このようなものが動作するはずです:

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

そして、他のすべてを同じに保ちます。これにより、画像の順序が一定に保たれます。

于 2017-01-09T22:18:37.890 に答える