Вот плукер - http://plnkr.co/edit/PaG1k5N37BTOflObnN7K?p=preview
Typeahead
работает отлично. Однако проблема заключается в том, что это позволяет мне добавлять повторяющиеся значения. Например, если Marie
уже добавлена в элемент tag
, он позволяет мне добавить его снова. Есть ли способ заставить typeahead
отображать предложения, которые еще не были добавлены.
Я думаю, что для решения этой проблемы необходимо использовать decipher.tags.addfailed
. Я не мог заставить его работать.
ОБНОВИТЬ
С помощью ответа Daniel_L's
я решил решить проблему.
Когда инициируется событие decipher.tags.added
вызывается tagAdded()
. Я завернул эту функцию обратного вызова в $timeout
. Выполнение этого обновленного свойства $scope.to
как $timeout
вызывает $apply()
внутренне.
Вот рабочий плукер - http://plnkr.co/edit/elPefHusJMunHEOhP0HI?p=preview
Согласно их исходному коду decipher.tags.added
- это имя события emit
, поэтому вы, чтобы получить доступ к тегу, который добавил пользователь, который вам нужно сделать:
$scope.$on("decipher.tags.added", function(info, obj) {
console.log(obj.tag); //get the tag info
});
Чтобы предотвратить добавление тега несколько раз, вам понадобится сращить массив после каждого события. Однако не знаю, как пройти угловое $scope.apply()
.
(function() {
"use strict";
angular
.module("plunker", ["decipher.tags", "ui.bootstrap"])
.controller("EmailViewController", ["$scope", EmailViewController]);
function EmailViewController($scope) {
$scope.to = [
{ name: "John", value: "John" },
{ name: "Marie", value: "Marie" },
{ name: "Ghita", value: "Ghita" },
{ name: "Marghioala", value: "Marg" }
];
$scope.info = { select: [] };
$scope.typeaheadOpts = {
minLength: 1
};
$scope.$on("decipher.tags.added", tagAdded);
function tagAdded(info, obj) {
var index = find($scope.to, {name: obj.tag.name});
if (index >= 0) $scope.to.splice(index, 1); //removes from array bound to scope
}
function find(obj, pred) {
var key = Object.keys(pred)[0];
for (var i = 0; i < obj.length; i++) {
if (obj[i][key] === pred[key]) return i;
}
}
}
})();
decipher.tags.added
, зачем нужныinfo
иobj
для доступа к введенному имениtag
? Когда я используюobj
безinfo
, я получаю сообщение об ошибке.$on
. Обойти это невозможно, вы должны включить оба аргумента.