Angular UI select：从远程服务获取数据

Question

我正在使用角度UI选择。

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是预定义的数组。我不想事先定义数据数组。

我一直在互联网上寻找任何可能的文档或教程，但却找不到任何有用的东西。

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。

这是一个非常简单的例子，但我希望它会对你有所帮助。更改从文件line 118中的demo.js开始。

修改

如果您想动态更新选择列表，可以使用refresh指令的refresh-delay和ui-select-choices属性。

您可以猜测，第一个属性的功能类似于

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