タグを保存するためにelasticsearchを使用し、オートコンプリートのためにngTagsInputでそれらを動的に取得したいと考えています。ngTagsInput が elasticsearch から回答を受け取るところまで機能し、ブラウザー コンソールに次のエラーが表示されます。
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use
'track by' expression to specify unique keys. Repeater: item in
suggestionList.items track by track(item), Duplicate key: undefined,
Duplicate value:{"_index":"data","_type":"tags","_id":"4","_score":1,"_source":{"id":4,"text":"Testinchen"}}
ここでの問題は、私が受け取った約束に 4 つの要素を持つ配列が含まれていることです (より評判が高ければ、ここに写真を投稿しますが、いいえ、スタックオーバーフローでは許可されません:x)
私は一晩中 ngTagsInput にこの約束を受け入れさせようとしましたが、できた最善の方法は、elasticsearches からのヒットが 1 つだけで複数ではない場合にオブジェクトを取得することでした。
HTML コードは次のようになります。
<div data-ng-controller="TagsController">
<tags-input ng-model="taglist">
<auto-complete source="loadTaglist($query)"template="tagTemplate"></auto-complete>
</tags-input>
</div>
<script type="text/ng-template" id="tagTemplate">
<span ng-bind-html="$highlight($getDisplayText())"></span>
<div ng-repeat="model in data._source">
@{{model}}
</div>
</script>
{{ model }} の前の @ は、これが laravel バックエンドで実行されるためです。気にしないでください ^^
そして、JSは次のとおりです。
petopia.controller('TagsController', function($scope, tags, esClient) {
$scope.taglist = [{
"id" : "1",
"text": "Pet"
}];
$scope.loadTaglist = function(query) {
var taglist = esClient.search({
q: "*"+query+"*"
}).then(function (response) {
return response.hits.hits;
}, function (error) {
console.trace(error.message);
});
return tags.load(taglist);
};
});
petopia.service('tags', function($q) {
this.load = function(taglist) {
var deferred = $q.defer();
deferred.resolve(taglist);
console.log(deferred.promise);
return deferred.promise;
};
});
angularjs にまったく慣れていない私はここでかなり途方に暮れているので、助けていただければ幸いです。