javascript - ng-repeat 内的 angularjs ng-model 性能较差

Question

在以下场景中，我遇到了 Angular 的性能问题:

<div ng-repeat="a in array">
  <input ng-model="something">
</div>

我在 Controller 中编写了代码，在 ng-click 上将数组更改为具有一组不同的对象。问题是，如果数组具有相当数量的对象，则单击的响应速度不会像我希望的那样灵敏(短暂的延迟)。

经过一番调查，我注意到在更改 ng-click 中的数组后，$digest 花费了相当长的时间。所以我创建了这个short test code重现它。

真实的应用场景是这样的:我有一个表，其中每一行代表一个可编辑对象，每个对象都有许多我希望能够编辑的不同字段。这样，每当我单击表中的一行时，都会有另一个 html，其中包含对象属性上具有不同 input 的所有 ng-repeat。

有人知道如何提高效率吗？

谢谢

Answer 1

同一页面上有太多输入元素通常是一个坏主意。这就是为什么专业的数据网格编辑器选择在单独的弹出窗口或内联中一次仅编辑单个数据行。即使在内联使用时，对象也会即时注入(inject)。

输入元素太重，无法在同一页面上放置太多输入元素。我过去也犯过同样的错误，试图实现一个数据网格，其中所有可编辑字段从一开始就是输入元素。最重要的是，您必须保留实时 Angular 模型绑定(bind)，这会增加性能开销。

在您的情况下，最简单的方法之一是实现一个指令，该指令在单击之前显示为 span 元素，并在单击事件时交换为输入元素。另一种选择 - 两者兼有并切换其可见性样式。后者在 Angular Directive(指令)中可能更容易，但可能没有那么高效。

还要留意您拥有的其他绑定(bind)。当涉及到数据网格时，这一点变得很重要。在 Angular 1.3 中，您现在可以使用“::”语法进行一次性绑定(bind)，这也可能会有所帮助。