擴展angular-ui-bootstrap typeahead模塊

Question

我正在使用angular-ui-boostrap的typeahead組件讓人們選擇一個人的名字，或者如果他們的選擇不存在則添加一個新名字。

現在我用自己的代碼修改了getMatchesAsync ：

      if(scope.matches.length < 4 || scope.matches.length == undefined){
        scope.matches.push({
          id: getMatchId(matches.length),
          label: 'Add New +',
          model: 'new'
        });
      }

但我意識到這不是一個好的長期解決方案，尤其是在更新組件時。

我應該在哪里放置代碼，如何將其集成到組件中？ Typeahead模塊： https ： //github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js

Answer 1

這是我在評論中建議的一個例子......

someModule.filter('filterWithNew', function($filter) {
    return function(array, expression, comparator) {
        var matches = $filter('filter')(array, expression, comparator);

        if (matches.length < 4) {
            matches.push({
                label: 'Add new +',
                model: 'new'
            });
        }
        return matches;
    };
});

然后你應該可以使用

... typeahead="name.label for name in names | filterWithNew:$viewValue"