Я использую 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 - это тот метод, который вызывается, когда пользователь нажимает клавишу ввода или щелкает по списку, но я не знаю, как сделать обратный вызов по этому поводу ...
Благодарность !
источник
state.id as state.name for state in states
. В этом случае$item
естьstate
, $ модельstate.id
, и$label
этоstate.name
Изменить: этот метод сейчас не лучший. Лучше использовать обратный вызов 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); }); }
источник
Следующим должен быть ваш 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 вы получите весь объект, который вы передали в основном массиве списка предложений
источник
попробуйте следующее перед проверкой
modelCtrl.$setValidity('editable', true);
источник