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

问题描述

我采用了棱角分明的UI选择。

I am using angular UI select.

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

我看了演示的可在这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.

我已经写了Web服务和Web服务工作正常。

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

我如何使用角度UI选择从远程服务提取数据？

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 为predefined阵列。我不想预先定义的数据数组。

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

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

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 ：

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

所以，现在你可以使用这个code，而不pre-定义你的 availableColors 一些值。

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

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

这是一个非常简单的例子，但我希望它会帮助你。从更改启动行118 文件 demo.js 。

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

如果要动态更新的选项列表 - 您可以使用属性刷新和刷新延迟的 UI的选择，选择指令。

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"

正如您可以猜到它是用于调用毫秒刷新功能设定的延迟。默认情况下此值设置为 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.

我更新了普拉克，所以我决定不写自己的后台功能。这就是为什么你可以检查它的工作原理是简单地在第一 UI选字段中输入红色 - 值将被获得另一个以.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.

希望，它会帮助你。

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