Question

情况

大家好！我正在为我的应用程序使用Angular ui-select，以便从数据库中选择用户。如果用户不在列表中，则可以使用标记输入新条目。

通过编写名称并按ENTER或TAB键，新条目将保存为新标记。

除了一件小事之外，一切都工作正常：如果我用鼠标集中注意力，我会丢失输入的输入，这对用户不太友好。

CODE

<h3>Array of objects</h3>
<ui-select multiple tagging tagging-label="new tag" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>
      email: {{person.email}}
      age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
    </small>
  </ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>

PLUNKER

http://plnkr.co/edit/7fSAKmj3pLeeTaid4pMH?p=preview

问题

如何设置将输入文本保存为新标签，不仅可以通过按ENTER，还可以通过鼠标聚焦？

非常感谢！

Answer 1

我已经通过在html中的ui-select指令中添加tag-on-blur ='true'来分叉ui-select并启用此功能。如果您愿意，我可以在等待拉取请求合并时使用我的存储库。

https://github.com/mattmcardle/ui-select/tree/tag_on_blur

如果您使用我的分叉并希望在模糊上启用标记，那么您的HTML代码将如下所示：

<h3>Array of objects</h3>
<ui-select multiple tagging tagging-label="new tag" tag-on-blur="true" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
  email: {{person.email}}
  age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>

Answer 2

只需创建一个指令。这将处理单击外部选项卡并输入。

angular.module('module')
.directive('tagOnBlur', function($timeout) {
  return {
    require: 'uiSelect',
    link: function(scope, elm, attrs, ctrl) {

        scope.isTab = false;

        ctrl.searchInput.bind("keydown keypress", function (event) {
            if(event.which === 9 || event.which === 13) {
                event.preventDefault();
                scope.isTab = true;
            }
        });

        ctrl.bind('click', function (event) {
            scope.isTab = true;
        });

        ctrl.searchInput.on('blur', function() {
            if (scope.isTab){
                scope.isTab = false;
                return;
            }
            if ((ctrl.items.length > 0 || ctrl.tagging.isActivated)) {
                $timeout(function() {
                    ctrl.searchInput.triggerHandler('tagged');
                    var newItem = ctrl.search;
                    if ( ctrl.tagging.fct ) {
                        newItem = ctrl.tagging.fct( newItem );
                    }
                    if (newItem) ctrl.select(newItem, true);
                });
            }
        });
    }
  };
});

角度ui-select标记在模糊时丢失文本输入

2 个答案: