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

每次服务器发送三个图像。以前我没有track by $index从我添加的这个 SO answartrack by $index中使用，但没有运气。

我认为 angular 正在重新渲染整个数组。如果是这样，我怎样才能停止这种重新渲染？

4

2 回答 2

0

很难说为什么 Angular 会重新排序您的图像，因为它看起来不像您的数组正在重新排序。

尝试添加一个 orderBy 子句。像这样的东西应该工作：

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

并保持其他一切不变。这将确保图像的顺序保持一致。

于 2017-01-09T22:18:37.890 回答
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 回答