ngTagsInput自动填充显示点击建议

时间:2015-02-02 12:13:07

标签: angularjs ng-tags-input

我想自定义自动完成的样式和行为以类似按钮。主要问题是,自动填充功能目前可以显示向下箭头,对焦和空白的建议。

任何实现此目的的指针?任何可以做到这一点的替代模块?

2 个答案:

答案 0 :(得分:1)

指令tagsInput定义为

tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig) {
...
 return {
    restrict: 'E',
    require: 'ngModel',
    scope: {
        tags: '=ngModel',
        onTagAdded: '&',
        onInvalidTag: '&',
        onTagRemoved: '&'
    },
    replace: false,
    transclude: true,
    templateUrl: 'ngTagsInput/tags-input.html',

它将加载ngTagsInput/tags-input.html作为其模板。然后,让我们来看看这个file

<input class="input"
       ng-model="newTag.text"
       ng-change="eventHandlers.input.change(newTag.text)"
       ng-keydown="eventHandlers.input.keydown($event)"
       ng-focus="eventHandlers.input.focus($event)"
       ng-blur="eventHandlers.input.blur($event)"
       ng-paste="eventHandlers.input.paste($event)"
       ng-trim="false"
       ng-class="{'invalid-tag': newTag.invalid}"
       ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}"
       ti-autosize>

因此,您可以在此处添加自定义操作ng-click="eventHandlers.input.click($event)",并在指令中实现click函数。

自定义样式应该类似。

答案 1 :(得分:0)

根据Rebornix的回答,我最终使用一个名为suggestionList.load()的新loadOnClick参数来分叉和修改autocomplete指令。

可能需要更多微调,但它可以按预期工作。更改提交如下:event handler - templateimplementation