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

92

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 !

angularjs angular-ui bootstrap-typeahead

— mchasles
quelle

250

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/

— Matt
quelle

2

Vielen Dank! Lief wie am Schnürchen. Dies sollte wahrscheinlich offiziell auf der Referenzseite unter der Überschrift Typeahead

— dokumentiert werden

29

Hat jemand eine Idee, was die $ item $ model $ label-Objekte tatsächlich in diesem Rückruf sind? Typeahead-on-select = 'onSelect ($ item, $ model, $ label)'?

— AardVark71

@Matt, gibt es überhaupt eine Möglichkeit, Postback bei der Verwendung von $ http mit dem onSelect-Ereignis durchzuführen?

— Pratik Gaikwad

15

@ AardVark71 $ item $ model $ label Diese drei Eigenschaften sind jeweils wie folgt. Wenn Sie ein JSON-Array von Objekten mit mehr als einer Eigenschaft binden, erhalten Sie ein ausgewähltes Element in $ item mit allen Eigenschaften. $ model ist ein eingebautes Winkelmodell, in dem das ausgewählte Element gespeichert wird. value und $ lable geben Ihnen den Wert an, der nach der Auswahl im Textfeld angezeigt wird. Kurz gesagt, $ label ist also gleich $ model. Hoffe das klärt deinen Zweifel.

— Pratik Gaikwad

16

@ AardVark71 Es ist einfacher zu erklären, ob der Ausdruck wie folgt lautet : state.id as state.name for state in states. In diesem Fall $itemist state, ist $ Modell state.id, und $labeliststate.name

— Aximili

10

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

— mchasles
quelle

2

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

— Sandeep Gantait
quelle

0

Versuchen Sie vor der Validierung Folgendes

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

— Mohamed.Abdo
quelle