Javascript Angular UI 选择：从远程服务获取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26061411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular UI select : Fetch data from remote service
提问by Syed
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
目前我正在遵循演示中的简单示例
<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>
availableColorsis a predefined array. I don't want to define data array beforehand.
availableColors是一个预定义的数组。我不想事先定义数据数组。
I have been looking around the Internet for any possible documentation or tutorial but not able to find anything useful.
我一直在 Internet 上寻找任何可能的文档或教程，但找不到任何有用的东西。
回答by ababashka
In your example, at first you must initialize your availableColorsas 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 availableColorsby some values.
因此，现在您可以使用此代码而无需availableColors通过某些值预先定义您的。
Demo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview
演示：http: //plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview
In this example I added file data.jsonwhich 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 118in file demo.js.
这是一个非常简单的例子，但我希望它会帮助你。更改从line 118文件中开始demo.js。
Edit
编辑
If you want to dynamically update your list of choices - you can use the attributes refreshand refresh-delayof the ui-select-choicesdirective.
如果要动态更新的选项列表-您可以使用属性refresh和refresh-delay对的ui-select-choices指令。
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 refreshfunction in milliseconds. By default this value is set to 1000.
您可以猜到它用于refresh以毫秒为单位设置调用函数的延迟。默认情况下，此值设置为1000。
Demo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview
演示：http: //plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview
I updated my plunk, so I decided not to write own backend functions. That's why you can check it works by simply typing redin the first ui-selectfield - values will be got from another .jsonfile - data1.json.
我更新了我的 plunk，所以我决定不编写自己的后端函数。这就是为什么您可以通过简单地red在第一个ui-select字段中输入来检查它是否有效- 值将从另一个.json文件中获取 - data1.json。
Hope, it will help you.
希望，它会帮助你。
回答by developer10
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 $watchthe input value for change, and query the remote source when the value is changed
我相信你应该$watch改变输入值，并在值改变时查询远程源
