AngularJS

ngTagsInputでDuplicates in a repeater are not allowedの対処方法

More than 3 years have passed since last update.

はじめに前置き

以下機能を持ったRailsベースのWebアプリケーションを開発してます

  • スマフォアプリ向けのAPIの機能
  • 管理画面
  • スマートフォン向けサイト

基本的にはRailsのレールにのって開発をしているのですが、管理画面で割りと込み入ったことを今後やっていく予定でそこだけAngularJSの機能を多用していこうと思って従来jQueryのやつを使っていたものをTags InputのAngularJS版と思われるngTagsInputを利用することにしました。

ちなみに環境は以下です

  • Rails 4.2
  • AngularJS
    • Rubyのgemのangularjs-rails-1.4.3に内包されてるものを利用
  • ngTagsInput v3.0.0

生じていたトラブル

管理画面で新規にデーター登録してる時には気づかなかったのですが既存データーの編集画面を表示した時に、Webブラウザのコンソール画面に

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: tag in tagList.items track by track(tag), Duplicate key: undefined, Duplicate (以下省略)

というメッセージが表示されて、意図したデーターも表示されないトラブルが生じました

原因

Angularjs – ngTagsInput v2.2.0 – “Duplicates in a repeater are not allowed.”を読んで気づいたのですが、track by の所の処理に原因がありそうでした

解決策

AngularJSのngRepeatを"ちゃんと"理解する.をまずは読みつつ、今回作ってるものがバックエンドのRailsベースのアプリから


[
  {
    id: 1,
    name: "ローライズ",
  },
  {
    id: 2,
    name: "スキニー",
  },
]

みたいなJSONを受け取る処理なので無駄な再描画を防ぐためにtrack byを利用するのは正しい使用例かと判断してngTagsInputのソースを書き換えることにしました

従来のngTagsInputのソースコード

ng-repeat="tag in tagList.items track by track(tag)

変更後のngTagsInputのソースコード

ng-repeat="tag in tagList.items track by $index

にて解決。