Angular UI select：從遠程服務獲取數據

Question

我正在使用角度UI選擇。

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

我看了看這個plunkr的演示版本

我想從遠程服務獲取數據。 每次用戶在文本字段中鍵入內容。 我想從遠程服務獲取數據，並根據輸入值過濾結果。

我寫了一個Web服務和Web服務工作正常。

如何使用angular ui select從遠程服務獲取數據？

目前我正在關注demo中的簡單示例

  <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是一個預定義的數組。 我不想事先定義數據數組。

我一直在互聯網上查找任何可能的文檔或教程，但無法找到任何有用的東西。

Answer 1

在您的示例中，首先必須將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 。

這是一個非常簡單的例子，但我希望它會對你有所幫助。 更改從文件demo.js line 118開始。

編輯

如果要動態更新選擇列表 - 可以使用ui-select-choices指令的屬性refresh和refresh-delay 。

你可以猜到，第一個屬性的功能就像

refresh="funcAsync($select.search)"

每次輸入任何內容時都會調用它。 你可以使用第二個屬性作為

refresh-delay="0"

您可以猜測它用於調用refresh函數的設置延遲（以毫秒為單位）。 默認情況下，此值設置為1000 。

演示： http ： //plnkr.co/edit/BcJOezOABxSuc2fa5lRy？p =preview

我更新了我的插件，因此我決定不編寫自己的后端函數。 這就是為什么你可以檢查它的工作原理是簡單地輸入red在第一ui-select場-值將被從另一得到.json文件- data1.json 。

希望，它會幫助你。

Answer 2

既然你說：

我希望每次用戶在輸入框中輸入一些值時調用服務，服務將根據文本框中輸入的值返回過濾結果。

我相信你應該$watch變化的輸入值，並在值改變時查詢遠程源