javascript - 扩展 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"