eckiger UI-Bootstrap-Typeahead-Rückruf bei selectMatch?

Ich verwende den eckigen UI-Bootstrap-Typeahead und möchte ihn verwenden, um viele Auswahlmöglichkeiten zu finden. Daher muss ich den ausgewählten Wert abrufen, wenn die selectMatch-Methode gestartet wird, aber ich kann nicht finden, wie das geht das in meinem Controller

<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">

Wenn ich den ausgewählten Wert beobachte, erhalte ich die Änderung jedes Mal, wenn eine Taste gedrückt wird ...

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

Ich habe festgestellt, dass die Methode selectMatch aufgerufen wird, wenn der Benutzer die Eingabetaste drückt oder auf die Liste klickt, aber ich weiß nicht, wie ich einen Rückruf dazu erhalten soll ...

Vielen Dank !

Es gibt jetzt einen besseren Weg, dies zu tun. Eine neue Rückrufmethode wurde hinzugefügt

Fügen Sie in der Controller-Datei Folgendes hinzu:

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

Fügen Sie in der Ansicht Folgendes hinzu:

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

Weitere Informationen finden Sie in der Typeahead-Spezifikation (Suche nach onSelect).

Überprüfen Sie, ob die folgenden URLs hilfreich sind: 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/

Bearbeiten: Diese Methode ist derzeit nicht die beste. Es ist besser, den onSelect-Rückruf zu verwenden, wie in der obigen Antwort erläutert.

Ich fand heraus, wie man macht, was ich wollte. Ich habe gesehen, dass es ein typeahead-editierbares Attribut gibt. Wenn es auf false gesetzt ist, ändert sich der ausgewählte Wert nur, wenn ein Wert aus dem Modell ausgewählt wird. Die $ watch funktioniert also einwandfrei, um zu überprüfen, wann ein neuer Wert ausgewählt wird.

<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);
     });
}

Folgendes sollte Ihr HTML sein

 <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)' />

Fügen Sie einfach typeahead-on-select im Eingabe-Tag mit der Rückruffunktion hinzu.

Das Folgende würde in den Controller gehen

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

Innerhalb von $ item erhalten Sie das gesamte Objekt, das Sie im Hauptarray der Vorschlagsliste übergeben haben

Versuchen Sie vor der Validierung Folgendes

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