Angular v1.4重复一个div而不重新渲染已经渲染的项目答案

【问题标题】：Angular v1.4 repeat a div without re-rendering already rendered itemsAngular v1.4重复一个div而不重新渲染已经渲染的项目
【发布时间】：2017-05-24 03:44:38
【问题描述】：

我编写了代码来重复一个图像数组和一个加载更多按钮来 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，但没有运气。

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

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-track-by

【解决方案1】：

您可以使用 Array.concat() 而不是推送所有元素，这可能会解决您的问题。

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：