Заголовок Angular-Tag, позволяющий дублировать значения

0

Вот плукер - 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

Теги:
angularjs-directive
typeahead.js

1 ответ

0

Согласно их исходному коду 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;
      }
    }
  }

})();
  • 0
    Спасибо, что нашли время ответить. Когда вызывается событие decipher.tags.added , зачем нужны info и obj для доступа к введенному имени tag ? Когда я использую obj без info , я получаю сообщение об ошибке.
  • 0
    Это аргументы, отправляемые обратному вызову методом $on . Обойти это невозможно, вы должны включить оба аргумента.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню