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

Question

情况

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

通过写入名称并按ENTER或TAB,新条目将保存为新标记.

一切都工作得很好,除了一件小事:如果我用鼠标集中注意力,我会输入我输入的输入,这对用户不太友好.

码

<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

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

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

如果您要使用我的 fork 并希望启用模糊标记，您的 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>