Angular ui-bootstrap callback на selectMatch?

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

<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 - это тот, который вызывается, когда пользователь нажимает клавишу ввода или нажимает на список, но я не знаю, как иметь обратный вызов для этого...

Спасибо!

Ответ 1

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

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

 $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 для получения дополнительной информации (поиск по выбору).

Проверьте, помогают ли следующие 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

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

Я нашел, как делать то, что я хотел. Я видел, что есть атрибут 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);
     });
}

Ответ 3

Следующим должен быть ваш 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 вы получите весь объект, который вы передали в основном массиве списка предложений

Ответ 4

попробуйте выполнить следующие действия перед проверкой

 modelCtrl.$setValidity('editable', true);