允许重复的angular标签

Question

这是一个活塞- 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

Answer 1

根据其源代码decipher.tags.added是名称和emit事件，所以您为了访问用户添加的标签必须这样做:

$scope.$on("decipher.tags.added", function(info, obj) {
    console.log(obj.tag); //get the tag info
});

为了防止标签被多次添加，你需要在每个事件之后拼接数组。不知道如何通过angular的$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;
      }
    }
  }
})();