扩展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'
        });
      }

但我意识到这不是一个好的长期解决方案，尤其是在更新组件时。

我应该在哪里放置代码，如何将其集成到组件中？ 预先输出模块：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"