ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript-扩展angular-ui-bootstrap预输入模块

2019-10-28 07:34:54  阅读:164  来源: 互联网

标签:angularjs angular-ui-bootstrap angular-ui-typeahead javascript


我正在使用angular-ui-boostrap的预输入组件让人们选择一个人的名字,或者如果不存在他们的选择,则添加一个新名字.

现在,我用自己的代码修改了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

解决方法:

这是我在评论中建议的示例…

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"

标签:angularjs,angular-ui-bootstrap,angular-ui-typeahead,javascript
来源: https://codeday.me/bug/20191028/1950768.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有