Używam kątowego typu ui-bootstrap z wyprzedzeniem i chciałbym go użyć jako sposobu na wybór wielu opcji, więc potrzebowałbym uzyskać wybraną wartość po uruchomieniu metody selectMatch, ale nie mogę znaleźć, jak to zrobić to w moim kontrolerze
<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">
Jeśli obserwuję wybraną wartość, otrzymuję zmianę za każdym naciśnięciem klawisza ...
scope.$watch('selected', function(newValue, oldValue) {... });
Zrozumiałem, że metoda selectMatch to ta, która jest wywoływana, gdy użytkownik naciśnie enter lub kliknie na liście, ale nie wiem, jak wywołać zwrotną ...
Dzięki !
źródło
state.id as state.name for state in states
. W takim przypadku$item
jeststate
, $ model jeststate.id
, a$label
jeststate.name
Edycja: ta metoda nie jest teraz najlepsza. Lepiej jest użyć funkcji oddzwaniania onSelect, jak wyjaśniono w odpowiedzi powyżej.
Odkryłem, jak robić, co chcę. Widziałem, że istnieje atrybut typeahead-editable i jeśli jest ustawiony na false, to wybrana wartość zmienia się tylko wtedy, gdy wybrana jest wartość z modelu. Tak więc $ watch działa dobrze, aby sprawdzić, kiedy wybrana jest nowa wartość.
<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); }); }
źródło
Poniżej powinien być twój 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)' />
po prostu dodaj typeahead-on-select w tagu wejściowym z funkcją callback.
Następujące trafiłyby do kontrolera
$scope.onSelect = function ($item, $model, $label) { console.log($item); if($item.tid) $scope.activeTitleId = $item.tid };
wewnątrz $ item otrzymasz cały obiekt, który przekazałeś w głównej tablicy listy sugestii
źródło
spróbuj wykonać poniższe czynności przed walidacją
modelCtrl.$setValidity('editable', true);
źródło