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中未更改的项目

1 个答案: