Question

我遇到需要将项目添加到最初使用ng-repeat生成的列表的情况。我该怎么做？

<div ng-click="prependItem()>Click Here</div>
<div ng-repeat="item in items">
    <div class="someClass">Item name: {{item.name}}</div>
    <div class="anotherClass">Item type: {{item.type}}</div>
</div>

如果我点击prependItem()，我想要将新项目添加到列表顶部。显然，我不想重新生成整个ng-repeat。我一直无法找到任何可以解释如何执行此操作的文档。提前感谢您的任何帮助！

Answer 1

scope.prependItem = function (newItem) {
    items.unshift(newItem);
};

AngularJS非常聪明，可以知道添加内容，并且只为其创建html元素 http://plnkr.co/edit/qzIfzSP6buiQ49rDreNk?p=preview

您可以从控制台看到只有新添加的项目才会记录消息

Answer 2

如果您将项目添加到阵列的前面，

ng-repeat将重建列表。如果你把它添加到最后它更聪明，因为它只会更新DOM以反映你添加的一个项目的变化。

因为你已经在前面添加了一个项目，所以它必须移动DOM中的所有内容，所以我认为它只是重建它，因为它比移动更容易（不要引用我，虽然大声笑）。重建该列表并不一定是坏事（除非它很大，你甚至不会注意到刷新，如果它非常大，我建议在重建html的时候显示一个微调器，这就是我们的方法'在工作中采取;因为用户点击了按钮，他们期待互动，所以旋转器似乎是最好的妥协，同时角度重新渲染。）

如何将新项目添加到ng-repeat列表中？

2 个答案: