2014-11-21 4 views
1

Im, использующий Angular-UISelect, чтобы включить поиск по выпадающему списку.AngularJS UISelect - вызов REST API при поиске (Min 3 chars)

Теперь у меня есть вызов.

  1. нужно создать фильтр на уровне контроллера (области видимости контроллера не приложение), который занимает 3 мин символы от пользователя и нажмите REST API на основе 3-х символов и связать результат с API обратно UISelect.

Шаги:

  1. Начальная нагрузка UIselect не будет иметь каких-либо данных.
  2. Типы пользователей 3 символов
  3. огнь фильтр (контроллер области действия), который вызывает REST API с 3 символами
  4. связывают REST API-ответ на UISelect.

Когда я посмотрел демонстрацию UISelect, он выполняет поиск по уже связанным данным.

Нужна информация о том, как это сделать.

+0

Можете ли вы предоставить некоторый код, где Вы находитесь в? –

ответ

5

вам нужно использовать

<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 
} 
+0

Спасибо, бит У меня проблема , когда я делаю выбор, как показано ниже, и мой UIselect не многократный {{$ item.Product_Description}} ({ {$ item.Product_Code}}) Я вижу открытые/закрывающие скобки в выпадающем списке, как «()», но когда я удаляю Product_code из select match, он выглядит хорошо, но не выбирает в формате Я хочу, нужны входы –

1

У меня была такая же проблема. Я нашел это:

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() 
    }) 
    } 
} 
Смежные вопросы