Angular UI Select是一个流行的AngularJS库，它提供了一个易于使用和高度可定制的选择组件。在实际项目中，我们经常需要从远程服务获取数据并填充UI Select组件。这篇文章将介绍如何使用Angular UI Select与远程服务交互。
安装Angular UI Select
首先，我们需要安装Angular UI Select。可以通过npm进行安装：
npm install angular-ui-select
或者下载官方源代码并在HTML文件中引入。
数据获取
接下来，我们需要从远程服务获取数据。在本例中，假设我们有一个名为"api/data"的RESTful API，它返回一个JSON数组，其中每个对象都有"label"和"value"属性。
1. 使用$http服务获取数据
AngularJS提供了一个内置的$http服务，可以用来发起HTTP请求。我们可以使用它来从远程服务获取数据。以下代码展示了如何使用$http服务获取数据：
app.controller('MyController', function($scope, $http) {
$http.get('api/data').then(function(response) {
$scope.data = response.data;
});
});在上面的代码中，我们在控制器中注入了$scope和$http服务。在控制器初始化时，我们使用$http.get()方法向后端发送GET请求，并使用.then()方法处理响应。在响应处理程序里，我们把返回的数据存储到$scope.data变量中。
2. 使用$resource服务获取数据
除了使用$http服务，我们还可以使用AngularJS中的另一个内置服务$resource。$resource服务是一个RESTful资源管理器，它可以帮助我们更方便地管理RESTful API。
以下代码展示了如何使用$resource服务获取数据：
app.factory('MyData', function($resource) {
return $resource('api/data');
});
app.controller('MyController', function($scope, MyData) {
$scope.data = MyData.query();
});在上面的代码中，我们定义了一个名为"MyData"的工厂函数，它返回一个$resource对象。这个对象映射到我们的RESTful API，并暴露出一些方法，如query()、save()等。
在控制器中，我们注入了$scope和"MyData"服务。在控制器初始化时，我们使用MyData.query()方法向后端发送GET请求，并将返回的数据存储到$scope.data变量中。
将数据填充到UI Select组件
现在，我们已经成功从远程服务获取了数据。接下来，我们需要将数据填充到UI Select组件中。以下代码展示了如何使用Angular UI Select组件：
<ui-select ng-model="selectedItem">
<ui-select-match>{{$select.selected.label}}</ui-select-match>
<ui-select-choices repeat="item.value as item in data | filter: $select.search">
{{item.label}}
</ui-select-choices>
</ui-select>在上面的代码中，我们使用ng-model指令来绑定UI Select组件的选中值。我们使用ui-select-match指令定义了选中值的模板，使用ui-select-choices指令定义了选项列表。在ui-select-choices指令中，我们使用repeat指令来循环遍历数据数组，并使用AngularJS过滤器过滤搜索关键词。
总结
本文介绍了如何使用Angular UI Select与远程服务交互。我们首先学习了如何使用$http服务和$resource服务获取数据，然后展示了如何将数据填充到UI Select组件中。希望这篇文章能帮助你更好地理解Angular UI Select的使用方法，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30626