9

状況

こんにちは！データベースからユーザーを選択するために、アプリにAngular ui-selectを使用しています。タグ付けを使用すると、ユーザーがリストに存在しない場合に新しいエントリを入力できます。

名前を書いて ENTER または TAB を押すと、新しいエントリが新しいタグとして保存されます。

1 つの小さなことを除いて、すべてが正常に機能しています。マウスでフォーカスを外すと、入力した入力が失われます。

コード

<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>

プランカー

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

質問

ENTER を押すだけでなく、マウスでフォーカスアウトして、入力テキストを新しいタグとして保存するにはどうすればよいですか?

どうもありがとうございました！

4

2 に答える 2

2

html の ui-select ディレクティブに tag-on-blur='true' を追加して、ui-select をフォークし、この機能を有効にしました。必要に応じて、プル リクエストがマージされるのを待っている間、私のリポジトリを使用できます。

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

私の fork を使用し、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>
于 2015-06-11T09:22:15.043 に答える