javascript - Angular : Update one-time binded data

Question

假设你的指令 Controller 中有一个像这样的数组

this.items = [
     {active: true, title: 'bar', ...},
     {active: false, title: 'foo', ...},
     ...
];

并在模板中将其可视化

<ol>
    <li ng-repeat="item in ::items" ng-class="...">{{item.title}}</li>
</ol>

请注意 ::，它确保它只执行一次，因为该指令在 ng-repeat 准备就绪后也会注入(inject)一些 DOM 元素。

DEMO

但是，应用程序会在某个时间点收到更新

this.items = updatedItems;

除了每个项目的某些属性外，更新与原始数据相同(active 可能会从 true 更改为 false例子)。现在，由于 ::，更新不会执行任何操作。现在我可以迭代每个项目

updatedItems.forEach((item, index) => {
    $scope.items[index].active = item.active;                
    $scope.items[index].title = item.title;
    ...
});

所以问题是解决这个问题的最佳方法是什么？

Answer 1

拥有数据集和数据绑定(bind)的副本(而不是实际的数据集)怎么样，您希望模板忽略哪些更改，所有这些都是针对特定条件的。

然后，当您想要更新数据时，您只需更新对复制的数据进行必要的更改，这些更改就会得到反射(reflect)。我知道，这确实增加了拥有数据副本的开销，但简单的解决方案通常可以避免以后的大量麻烦，特别是当团队的不同成员查看源代码时。