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

我正在使用角度用户界面选择。

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

我查看了演示的可用位置这个笨蛋 http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

我想从远程服务获取数据。每次用户在文本字段中输入内容时。我想从远程服务获取数据，并根据输入值过滤结果。

我已经编写了一个网络服务并且网络服务运行良好。

如何使用 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是一个预定义的数组。我不想预先定义数据数组。

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

在您的示例中，首先您必须初始化您的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通过一些价值观。

Demo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

在这个例子中我添加了文件data.json其中包含颜色数组。

这是一个非常简单的例子，但我希望它能对您有所帮助。改变从line 118在文件中demo.js.

Edit

如果您想动态更新您的选择列表 - 您可以使用属性refresh and refresh-delay of the ui-select-choices指示。

正如您可以猜到的，第一个属性的函数如下

refresh="funcAsync($select.search)"

每次您输入任何内容时都会调用它。您可以将第二个属性用作

refresh-delay="0"

正如您所猜测的，它用于设置呼叫延迟refresh以毫秒为单位运行。默认情况下该值设置为1000.

Demo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

我更新了我的 plunk，所以我决定不编写自己的后端函数。这就是为什么您只需输入即可检查它是否有效red在第一个ui-select字段 - 值将从另一个字段获取.json file - data1.json.

希望，它会对你有所帮助。