2

ユーザーが名前を入力し、複数セクションのないタグ付けでこのプランカーのように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 のドキュメントは非常に貧弱です。

4

0 に答える 0