最近项目中要求做一个下拉的城市选择的功能，由于项目使用了AngularJs框架，所以自然而然的想到ng-repeat指令，免去了自己写循环的烦恼。所以总结一下ng-repeat的使用方法：
代码如下
<!doctype html><html ng-app><head>
<meta charset="utf-8">
<title>ng-repeat directive</title></head><body><table ng-controller="CartController">
<caption>城市选择</caption>
<tr>
<th>请选择城市</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
</tr></table>
<script src="angular.min.js"></script><script>
$scope.items = [
{name: "北京"},
{name: "天津"},
{name: "上海"}
];</script></body></html>
这应该是最简单的ng-repeat的使用了。默认在ng-repeat的时候每一个item都要保证是唯一的，否则console就会打出error告诉你哪个key/value是重复的，如下：
$scope.items = [1，2，2，3，4];
这个数组2就重复了，html这么遍历它
<li ng-repeat="item in items">{{ item }}</li>
控制台就会抛出一个错误：
官网明确给出是因为值重复了：
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: string:blue, Duplicate value: 2
但是，正常的业务里数组有重复的值是很正常的，难道有重复值的数组要硬要搞成唯一的ng-repeat才能遍历，那这样的话很多业务场景就不能使用ng-repeat了；继续往下看，发现官网给了一个解决的方案
<div ng-repeat="value in [4, 4] track by $index"></div>
于是按照这个方案改了一下
<li ng-repeat="item in items track by $index">{{ item }}</li>
刷新网页，内容被正常解析。
扫一扫
3173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
