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

根据他们的source code 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;
      }
    }
  }

})();

Angular-tags typeahead允许重复值

1 个答案: