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

Question

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

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

jsbin example

(在我正在进行的实际项目中，重新渲染整个列表的成本很高，因为有很多 MathQuill 表达式。此外， slider 是动画的，因此会经常发生重新渲染。)

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