[英]Angular UI select : Fetch data from remote service
I am using angular UI select. 我正在使用角度UI选择。
https://github.com/angular-ui/ui-select https://github.com/angular-ui/ui-select
I looked around the demo's available at this plunkr 我看了看这个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. 我写了一个Web服务和Web服务工作正常。
How can I use angular ui select to fetch data from remote service ? 如何使用angular ui select从远程服务获取数据?
Currently I am following simple example from demo 目前我正在关注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
is a predefined array. availableColors
是一个预定义的数组。 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. 我一直在互联网上查找任何可能的文档或教程,但无法找到任何有用的东西。
In your example, at first you must initialize your availableColors
as an empty array: 在您的示例中,首先必须将availableColors
初始化为空数组:
$scope.availableColors = [];
Then, you can write your simple service with $http
: 然后,您可以使用$http
编写简单的服务:
$http.get('data.json').then(
function (response) {
$scope.availableColors = response.data;
$scope.multipleDemo.colors = ['Blue','Red'];
},
function (response) {
console.log('ERROR!!!');
}
);
So, now you can use this code without pre-defining your availableColors
by some values. 因此,现在您可以使用此代码,而无需通过某些值预定义availableColors
。
In this example I added file data.json
which contains an array of colors. 在这个例子中,我添加了包含颜色数组的文件data.json
。
It's a very simple example, but I hope that it will help you. 这是一个非常简单的例子,但我希望它会对你有所帮助。 Changes start from line 118
in file demo.js
. 更改从文件demo.js
line 118
开始。
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. 如果要动态更新选择列表 - 可以使用ui-select-choices
指令的属性refresh
和refresh-delay
。
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"
As you can guess it is used for set delay of calling refresh
function in milliseconds. 您可以猜测它用于调用refresh
函数的设置延迟(以毫秒为单位)。 By default this value is set to 1000
. 默认情况下,此值设置为1000
。
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
. 这就是为什么你可以检查它的工作原理是简单地输入red
在第一ui-select
场-值将被从另一得到.json
文件- data1.json
。
Hope, it will help you. 希望,它会帮助你。
Since you said: 既然你说:
I want to call the service everytime user input some values in input box and the service will return the filtered result based on the value input in text box. 我希望每次用户在输入框中输入一些值时调用服务,服务将根据文本框中输入的值返回过滤结果。
I believe you should $watch
the input value for change, and query the remote source when the value is changed 我相信你应该$watch
变化的输入值,并在值改变时查询远程源
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.