AngularJS中track by的作用

最新推荐文章于 2022-11-25 12:22:30 发布

原创最新推荐文章于 2022-11-25 12:22:30 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS #ng-repeat #track by

本文介绍AngularJS中使用ng-repeat指令时遇到的重复元素错误：Error:[ngRepeat:dupes]。该错误源于ng-repeat不允许数组中存在相同ID的对象。文章详细解释了如何通过自定义track by表达式解决此问题。

在使用AngularJS的时候，如果用ng-repeat指令遍历一个数组，当数组中有重复元素的时候,angularjs会报错：

Error: [ngRepeat:dupes]。这是因为ng-repeat不允许数组中存在两个相同Id的对象。为了避免这个错误,需要定义自己的track by表达式。

			<dd ng-repeat="todo in todos track by $index">//直接拿循环的索引变量$index来用
				<input type="checkbox" ng-checked="todo.checked" ng-click="done($index, $event)">
				{{todo.text}}
				<a ng-href="" ng-click="delete($index, todos)">删除</a>
			</dd>

上面的代码就创建了自己的track by $index表达式。