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包含颜色数组的文件.

这是一个非常简单的例子,但我希望它会对你有所帮助.更改从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.

希望,它会帮助你.