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

記事公開日:
最終更新日:

This post is also available in: English-US (英語)

[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
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報TwitterLinkedIn、またRSSfeedlyにてお知らせしていますのでフォローよろしくお願い致します。