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变化的输入值，并在值改变时查询远程源