ユーザーが名前を入力し、複数セクションのないタグ付けでこのプランカーのようにEnterキーを押したときに、配列に新しい要素を追加しようとしています。これが私がこれまでに得たものです:
<ui-select tagging="catTransform" on-select="addCategory()" ng-model="category.selected" theme="bootstrap" style="width: 600px;" title="Choose a category">
<ui-select-match placeholder="Выберите категорию...">{{category.name}}</ui-select-match>
<ui-select-choices repeat="category in categories | filter: {name: $select.search}">
<div ng-bind-html="category.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
そして、私のコントローラーには次のものがあります。
$scope.category = {}
$scope.categories =
[
{name: 'Food', id: 5},
{name: 'transport', id: 10}
]
$scope.catTransform = (name) ->
cat = {name: name, id: null}
$scope.addCategory = (item, model) ->
$scope.categories.push item
model = item
ご覧categories
のとおり、プレーンな文字列ではなくオブジェクトの配列であるためcatTransform
、文字列からオブジェクトを作成するこの関数があります。プランカーでランダムな文字列を入力してEnterキーを押すと、新しいタグが作成され、すぐに選択されます。plunker 内のあらゆる種類のイベントにリスナーをアタッチするコードを見つけることができませんでした。どういうわけか魔法のように機能します。ドキュメントでは、ディレクティブが on-remove と on-select の 2 つのカスタム イベントを提供すると言われています。上記のマークアップでわかるように、リスナーを on-select にアタッチしようとしましたが、もちろんうまくいきませんでした。それで、それはどのように行われるべきですか?key-press
どのキーが押されたかをハンドラー内で確認し、それがキーである場合Enter
は新しいカテゴリを配列に追加する必要がありますか? もしそうなら、どうすれば現在の検索文字列を取得できますか?
また、ハンドラー関数の 2 番目のパラメーターがディレクティブのモデル (ng-model
上記のマークアップで指定したものと同じ) に渡されるため、新しいオブジェクトを選択する場合は、次のように割り当てるだけです。
model = item
angularjs/select2 のドキュメントは非常に貧弱です。