防止更新 ng-repeat 中未更改的项目

Question

我有一个使用 ng-repeat 构建的列表；该列表包含与每个单独项目相关的滑块。更改单个项目会导致整个列表重新呈现。如何防止未更改的项目重新呈现？

<ul ng-repeat="obj in collection">
  <li class="obj">
    {{obj}}
    <input type="range" ng-model = "obj.value">
  </li>
</ul>

jsbin example

（在我正在做的实际项目中，重新渲染整个列表的成本很高，因为有很多 MathQuill 表达式。另外，滑块是动画的，所以重新渲染会发生很多。）

Answer 1

你的代码没有问题。
仅供参考，即使您向其中添加内容，列表也不会重新呈现。您可以通过打开开发者工具进行检查。
我已经为每个 li 添加了数据属性，以便您可以轻松检查列表是否没有重新呈现。
为了提高性能，您可以使用如下所示的按表达式跟踪

<ul>
  <li ng-repeat="obj in collection track by obj.name" class="obj" data-name="{{obj.name}}">
    {{obj}}
    <input type="range" ng-model = "obj.value">
  </li>
</ul>

已更新jsinb

防止更新 ng-repeat 中未更改的项目

Prevent updates to unaltered items in ng-repeat

javascript

angularjs

angularjs-ng-repeat