AngularJSのエラー:[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use ‘track by’ expression to specify unique

Published on:
Last updated:

This post is also available in: 日本語 (Japanese)

[ngRepeat:dupes]のエラーについて。
AngularJSを使ってるとたまに見たことのないエラーに遭遇します。今回のエラーも軽く調べるのに手間がかかりましたので、メモとして公開しています。

AngularJS-medium

AngularJS-medium

[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique

(意訳)リピーター内の重複は許可されていません。ユニークな値を指定するために'track by'式を使ってください。

[ngRepeat:dupes]エラーの原因

AngularJSのドキュメントのError Referenceの例ですが、下記のような配列[4, 4]に対してng-repeatしたい場合には'track by $index'を付け足さないとエラーとなるようです。
配列[4, 4]の値が重複していると見なされるからです。

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

連想配列の場合においても同様で参考リンク先にあるような以下の配列に対して'id'を識別基準としてng-repeatするとエラーとなるようです。

 [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

参考リンク:
https://docs.angularjs.org/error/ngRepeat/dupes
http://stackoverflow.com/questions/22761340/angularjs-ng-repeats-track-by-expression

About
Kuniyoshi Takemoto is the founder of Amelt.net LLC, and editor of this blog(www.amelt.net).Learn more and follow me on LinkedIn.