angularjs - AngularJS UISelect - 在搜索时调用 REST API（最少 3 个字符）

Question

我使用 Angular-UISelect 来启用对我的下拉列表的搜索。

现在我有一个挑战。

1. 需要创建一个控制器级别过滤器（范围为控制器而不是应用程序），该过滤器从用户那里获取 3 分钟字符并基于 3 个字符点击 REST Api，并将 API 的结果绑定回 UISelect。

脚步：

1. UIselect 的初始加载不会有任何数据。
2. 用户输入 3 个字符
3. 触发一个过滤器（控制器范围），它使用 3 个字符调用 REST API
4. 将 REST API 响应绑定到 UISelect。

当我查看 UISelect 演示时，它对已绑定的数据执行搜索。

需要一些关于如何去做的意见。

Answer 1

你需要使用

<ui-select-choices repeat="address in addresses track by $index"
         refresh="refreshAddresses($select.search)"
         refresh-delay="0">

在这个函数中refreshAddresses你可以把你的逻辑

$scope.refreshAddresses = function(input) {
    if(angular.isUnDefined(input) || input == null) return [];
    if(input.length < 3) return [];
    return $http.get() //your logic
}

Answer 2

我遇到了同样的问题。我找到了这个：

http://pastebin.com/dcfE07pg

# UI-SELECT
<ui-select on-select="clearCountries()" ng-model="customer.country_id" theme="bootstrap">
<ui-select-match placeholder="Wpisz minimum 3 znaki...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices refresh="checkCountry($select.search)"  refresh-delay="500" repeat="country.id as country in countries | filter: $select.search">
<div ng-bind-html="country.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>

# CONTROLLER FUNCTION
$scope.checkCountry = function(country_name) {
  if (country_name.length >= 3){
    DataFactory.search('countries', country_name, 1, 20).then(function(result) {
      $scope.countries = result.plain()
    })
  }
}