Angular ui-bootstrap обратный вызов typeahead на selectMatch?

92

Я использую angular ui-bootstrap typeahead, и я хотел бы использовать его как способ выбрать множество вариантов, поэтому мне нужно было бы получить выбранное значение при запуске метода selectMatch, но я не могу найти, как это сделать что в моем контроллере

<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

Если я смотрю выбранное значение, я получаю изменение каждый раз при нажатии клавиши ...

scope.$watch('selected', function(newValue, oldValue) {... });

Я понял, что метод selectMatch - это тот метод, который вызывается, когда пользователь нажимает клавишу ввода или щелкает по списку, но я не знаю, как сделать обратный вызов по этому поводу ...

Благодарность !

mchasles
источник

Ответы:

251

Сейчас есть лучший способ сделать это. Добавлен новый метод обратного вызова

В файл контроллера добавьте следующее:

 $scope.onSelect = function ($item, $model, $label) {
    $scope.$item = $item;
    $scope.$model = $model;
    $scope.$label = $label;
};

В виду добавить следующее:

 <input type="text"
        ng-model="selected"
        typeahead="state for state in states | filter:$viewValue"
        typeahead-editable="false"
        typeahead-on-select="onSelect($item, $model, $label)"/>

Для получения дополнительной информации см. Спецификацию typeahead (ищите onSelect).

Проверьте, помогают ли следующие URL-адреса http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

http://www.techguides.in/how-to-customize-autocomplete-to-display-multiple-columns-using-angularjs-ui-2/

Мэтт
источник
2
Благодарность! Работал как шарм. Это, вероятно , будет официально задокументированы на справочной странице под заголовком машинописный: angular-ui.github.io/bootstrap
ariestav
29
Кто-нибудь знает, что на самом деле представляют собой объекты $ item $ model $ label в этом обратном вызове typeahead-on-select = 'onSelect ($ item, $ model, $ label)'?
AardVark71
@Matt, можно ли как-нибудь выполнить обратную передачу при использовании $ http с событием onSelect?
Pratik Gaikwad
15
@ AardVark71 $ item $ model $ label эти три свойства указаны ниже соответственно. Если вы привязываете JSON-массив объектов, имеющих более одного свойства, вы получите выбранный элемент в $ item со всеми свойствами. $ model - это встроенная угловая модель, которая будет хранить выбранный item.value, а $ lable даст вам значение, отображаемое в текстовом поле после выбора. Короче говоря, часто $ label будет равняться $ model. Надеюсь, это проясняет ваши сомнения.
Pratik Gaikwad
16
@ AardVark71 Это легче объяснить , если выражение как: state.id as state.name for state in states. В этом случае $itemесть state, $ модель state.id, и $labelэтоstate.name
Aximili
10

Изменить: этот метод сейчас не лучший. Лучше использовать обратный вызов onSelect, как описано в ответе над этим.

Я нашел, как делать то, что хотел. Я действительно видел, что есть атрибут typeahead-editable, и если он установлен в false, то выбранное значение изменяется только тогда, когда выбрано значение из модели. Итак, часы $ работают нормально, чтобы проверить, когда выбрано новое значение.

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" typeahead-editable="false">

link: function(scope, elm, attrs){
    scope.$watch('selected', function(newValue, oldValue) {
        if (newValue)
          console.log(oldValue+"->"+newValue);
     });
}
mchasles
источник
2

Следующим должен быть ваш HTML

 <input id="title" type="text"  ng-model="title"  typeahead="data.enquiry_title for data in titleData | filter:$viewValue | limitTo:8" 
typeahead-on-select='onSelect($item, $model, $label)' />

просто добавьте typeahead-on-select во входной тег с функцией обратного вызова.

Следующее войдет в контроллер

$scope.onSelect = function ($item, $model, $label) {
            console.log($item);
            if($item.tid)
                $scope.activeTitleId = $item.tid
        };

внутри $ item вы получите весь объект, который вы передали в основном массиве списка предложений

Сандип Гантаит
источник
0

попробуйте следующее перед проверкой

 modelCtrl.$setValidity('editable', true);
Мохамед Абдо
источник