Angular UI 选择:从远程服务获取数据 [英] Angular UI select : Fetch data from remote service

问题描述

我正在使用 Angular UI 选择.

I am using angular UI select.

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

我环顾了 this plunkr

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

I want to fetch data from a remote service. Every time user types something into the text field. I want to fetch data from remote service with results filtered based on input value.

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

I have written a web service and web service is working fine.

如何使用 angular ui select 从远程服务中获取数据?

How can I use angular ui select to fetch data from remote service ?

目前我正在遵循演示中的简单示例

Currently I am following simple example from 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 是一个预定义的数组.我不想事先定义数据数组.

availableColors is a predefined array. I don't want to define data array beforehand.

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

I have been looking around the Internet for any possible documentation or tutorial but not able to find anything useful.

推荐答案

在您的示例中，首先您必须将 availableColors 初始化为一个空数组:

In your example, at first you must initialize your availableColors as an empty array:

$scope.availableColors = [];

然后，您可以使用 $http 编写简单的服务:

Then, you can write your simple service with $http:

$http.get('data.json').then(
  function (response) {
    $scope.availableColors = response.data;
    $scope.multipleDemo.colors = ['Blue','Red'];
  },
  function (response) {
    console.log('ERROR!!!');
  }
);

所以，现在您可以使用此代码而无需通过某些值预先定义您的 availableColors.

So, now you can use this code without pre-defining your availableColors by some values.

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

In this example I added file data.json which contains an array of colors.

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

It's a very simple example, but I hope that it will help you. Changes start from line 118 in file demo.js.

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

If you want to dynamically update your list of choices - you can use the attributes refresh and refresh-delay of the ui-select-choices directive.

你可以猜到，第一个属性的功能类似于

The first attribute, as you can guess, gets function like

refresh="funcAsync($select.search)"

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

which will be called every time you type anything. And you can use the second attribute as

refresh-delay="0"

如您所料，它用于设置以毫秒为单位调用 refresh 函数的延迟.默认情况下，此值设置为 1000.

As you can guess it is used for set delay of calling refresh function in milliseconds. By default this value is set to 1000.

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

I updated my plunk, so I decided not to write own backend functions. That's why you can check it works by simply typing red in the first ui-select field - values will be got from another .json file - data1.json.

希望能帮到你.

这篇关于Angular UI 选择:从远程服务获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！