web-dev-qa-db-ja.com

Angular UI select：リモートサービスからデータを取得する

angular UI select。を使用しています。

https://github.com/angular-ui/ui-select

this plunkr で利用可能なデモを見ました

リモートサービスからデータを取得したい。ユーザーがテキストフィールドに何かを入力するたびに。入力値に基づいてフィルタリングされた結果を使用して、リモートサービスからデータを取得します。

Webサービスを作成しましたが、Webサービスは正常に機能しています。

angular ui selectを使用してリモートサービスからデータを取得するにはどうすればよいですか？

現在、私はデモの簡単な例をフォローしています

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

availableColorsは事前定義された配列です。事前にデータ配列を定義したくありません。

考えられるドキュメントやチュートリアルをインターネットで探していましたが、有用なものが見つかりませんでした。

javascripthtml5angularjsangular-ui
32
Syed

この例では、最初にavailableColorsを空の配列として初期化する必要があります。

$scope.availableColors = [];

次に、$httpを使用して単純なサービスを記述できます。

$http.get('data.json').then(
  function (response) {
    $scope.availableColors = response.data;
    $scope.multipleDemo.colors = ['Blue','Red'];
  },
  function (response) {
    console.log('ERROR!!!');
  }
);

したがって、いくつかの値でavailableColorsを事前定義することなく、このコードを使用できます。

デモ： http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

この例では、色の配列を含むファイルdata.jsonを追加しました。

これは非常に単純な例ですが、役立つことを願っています。変更は、ファイルline 118のdemo.jsから始まります。

編集

選択肢のリストを動的に更新する場合は、refresh-delayディレクティブのrefreshおよびui-select-choices属性を使用できます。

最初の属性は、ご想像のとおり、次のような機能を取得します

refresh="funcAsync($select.search)"

何か入力するたびに呼び出されます。そして、2番目の属性を次のように使用できます。

refresh-delay="0"

推測できるように、refresh関数のミリ秒単位の遅延の設定に使用されます。デフォルトでは、この値は1000に設定されています。

デモ： http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

プランクを更新したため、独自のバックエンド関数を作成しないことにしました。そのため、最初のui-selectフィールドにredと入力するだけで機能することを確認できます。値は別の.jsonファイルから取得されます-data1.json。

希望、それはあなたを助けるでしょう。

56
ababashka