Angular ng-repeat 数组有重复值

默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的。如

$scope.items = [
  'red',
  'blue',
  'yellow',
  'white',
  'blue'
];

【国内直连ChatGPT 29元起】
国内直连ChatGPT,Plus会员每月29元起,支持最新o1模型探索更多领域,无需注册OpenAI账号。

这个数组blue就重复了,遍历它

<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: blue

虽然上面说的很清楚,需要一个唯一的key。这就纳闷了,正常的业务里数组有重复的值是很正常的,数组要硬要搞成唯一的ng-repeat才能遍历就白瞎了,继续往下看,发现官网给了一个解决的方案

<div ng-repeat="value in [4, 4] track by $index"></div>

于是按照这个方案改了一下

<li ng-repeat="item in items track by $index">{{ item }}</li>

刷新网页,正常工作

其实ng-repeat还是需要一个唯一的key,只不过你不track的话默认就是item本身,另外也只有在普通数据类型字符串,数字等才会出现这个问题,如果换成Object

$scope.items = [
  ['red'],
  ['blue'],
  ['yellow'],
  ['white'],
  ['blue']
];

html恢复为

<li ng-repeat="item in items">{{ item }}</li>

执行结果正常,因为[] !== [],不明白的那就自己试试

分享

TITLE: Angular ng-repeat 数组有重复值

LINK: https://www.qttc.net/465-angular-ng-repeat.html

NOTE: 原创内容,转载请注明出自琼台博客