web-dev-qa-db-ja.com

Angular-uiの新しいui-select（以前のui-select2）検索文字列の変更を$ watchするにはどうすればよいですか？

Angular-UIがUI-Select2ディレクティブを廃止し、新しいUI-Select（複数のテーマ（select2、bootstrap、selectize）を使用）を採用していることに気付きました。

次のようになります。

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>
</ui-select>

<p>Selected: {{multipleDemo.colors}}</p>

最初、私の選択ボックスは空であるはずですが、入力された文字、つまり少なくとも4文字の文字列を受け取る準備ができており、API呼び出しを行って、ボックスに入力する推奨値のリストを取得します。次に、1つの値が選択され、必要に応じて検索を繰り返す必要があります。

最初に、$watchをng-modelしてみました。この場合はmultipleDemo.colorsです（デモのこの例を使用）。 API呼び出しは発生しなかったので、その理由に気づきました。実際のモデルは、選択が行われたときにのみ変更されるため、まったく変更されません（私の選択ボックスは空なので、何も選択できません）。

私の結論は、フィルターとして追加されたもの、つまり$watchをfilter: $select.searchする必要があるということです。

誰かが私のコントローラーでそれをどのように使用することになっているのか知っていますか？

この：

$scope.$watch('$select.search', function(newVal){
    alert(newVal);
});

動作しません。

編集：誰かの参考のために、この短い議論を参照してください： select2のようなカスタムクエリ関数のサポートを追加することは可能ですか？

編集2：

ディレクティブ内から$emitを使用してこれを解決したので、値がコントローラーで使用できるようになりました。しかし、ディレクティブ自体をそのままにして、将来の更新で壊れないように、ディレクティブのこの部分をオーバーライドする方法を知りたいのですが。

angularjsangularjs-directiveangularjs-scopeangular-uiui-select2
10
developer10

_<ui-select-choices>_要素のrefresh属性を使用して、パラメーターとして_$select.search_を使用してスコープの関数を呼び出します。

_<ui-select-choices repeat="color in multipleDemo.availableColors | filter:$select.search"
                   refresh="refreshColors($select.search)"
                   refresh-delay="0">
    {{color}}
</ui-select-choices>
_

次に、関数（このスニペットではrefreshColors()）を使用して、それに応じて_multipleDemo.availableColors_を更新します。

_refresh-delay_属性を使用して、関数をデバウンスするミリ秒数を指定して、すばやく連続して何度も呼び出されないようにすることもできます。

_multipleDemo.colors_に対して行ったように、availableColorsをmultipleDemoに配置しました。 推奨 も同様です。

参照： i-selectディレクティブwiki セクションの下例：非同期。

16
Chris Bond

on-select属性があるようです。 Githubの例 を参照してください：

<ui-select ng-model="person.selected" on-select="someFunction($item, $model)" [...]>
  [...]
</ui-select>
10
superjos

我慢してください、これがSOに関する私の最初の答えです。

したがって、現在のトップの答えは私にはうまくいきません。別のオプションを提供したいだけです。 ui-select-choicesのrefreshプロパティは、スコープ内の名前付き関数をトリガーしません。

カスタム機能のUI選択にアクセスするための情報 ドキュメント内 に従いました。 $select.searchのように監視するカスタムディレクティブを作成します

myModule.directive('myUiSelect', function() {
  return {
    require: 'uiSelect',
    link: function(scope, element, attrs, $select) {
      scope.$watch('$select.search', function (search) {
        if (search) {
          ...
        }
      });
    }
  };
});

次に、<ui-select my-ui-select>タグにディレクティブを含めます。

1
zigzag

NgInitを使用して値を取得し、

<div ui-select ng-init="mySelect = $select"></div>
<button ng-click="search(mySelect.search)">Search</button>

代わりに「mySelect」を見ることができます

$scope.$watch('mySelect.search', function(newVal){
    alert(newVal);
});
1
user3637178