Angular UI 选择：从远程服务获取数据答案

【问题标题】：Angular UI select : Fetch data from remote serviceAngular UI 选择：从远程服务获取数据
【发布时间】：2014-11-21 13:46:44
【问题描述】：

我正在使用角度 UI 选择。

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

我在this plunkr查看了演示版

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

我写了一个网络服务，网络服务运行良好。

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

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

【问题讨论】：

标签： javascript html angularjs angular-ui

【解决方案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

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

希望对你有帮助。

【讨论】：

我想每次用户在输入框中输入一些值时调用服务，服务将根据文本框中输入的值返回过滤结果。如果我有更多记录，这是必要的，因为一次获取所有记录不是好的解决方案
@Syed：我更新了我的答案，所以你可以看到ui-select 执行<ui-select-choices> </ui-select-choices> 指令的两个属性：refresh 和refresh-delay
在您的函数中，您应该返回 $http 承诺，以便 ui-select 知道何时解决。

【解决方案2】：

既然你说：

我想每次用户在输入框中输入一些值时调用服务，服务将根据文本框中输入的值返回过滤结果。

我相信你应该$watch输入值进行更改，并在值更改时查询远程源

【讨论】：