angular ui-bootstrap typeahead wywołanie zwrotne w selectMatch?

92

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 !

mchasles
źródło

Odpowiedzi:

251

Teraz jest lepszy sposób na zrobienie tego. Dodano nową metodę wywołania zwrotnego

W pliku kontrolera dodaj:

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

W widoku dodaj następujące informacje:

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

Zobacz specyfikację typeahead, aby uzyskać więcej informacji (wyszukaj onSelect).

Sprawdź, czy poniższe adresy URL pomagają 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/

Matt
źródło
2
Dzięki! Działał jak urok. Prawdopodobnie powinno to być oficjalnie udokumentowane na stronie referencyjnej pod nagłówkiem Typeahead
ariestav
29
Czy ktoś ma pojęcie, czym właściwie są obiekty etykiety $ item $ model $ w tym typie wywołania zwrotnego ahead-on-select = 'onSelect ($ item, $ model, $ label)'?
AardVark71,
@Matt, czy jest w ogóle możliwość wywołania zwrotnego przy użyciu $ http ze zdarzeniem onSelect?
Pratik Gaikwad
15
@ AardVark71 $ item $ model $ etykieta te trzy właściwości są odpowiednio jak poniżej. Jeśli wiążesz tablicę JSON obiektów posiadających więcej niż jedną właściwość, otrzymasz wybrany element w $ item ze wszystkimi właściwościami. $ model to wbudowany model kątowy, który będzie przechowywać wybrany element. value i $ lable podadzą wartość wyświetlaną w polu tekstowym po dokonaniu wyboru. Krótko mówiąc, wielokrotnie $ label będzie równe $ model. Mam nadzieję, że to wyjaśnia twoje wątpliwości.
Pratik Gaikwad
16
@ AardVark71 Łatwiej jest wytłumaczyć, jeśli wyrażenie jest jak: state.id as state.name for state in states. W takim przypadku $itemjest state, $ model jest state.id, a $labeljeststate.name
Aximili
10

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);
     });
}
mchasles
źródło
2

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

Sandeep Gantait
źródło
0

spróbuj wykonać poniższe czynności przed walidacją

 modelCtrl.$setValidity('editable', true);
Mohamed Abdo
źródło