tipo di ui-bootstrap angolare callback head su selectMatch?


92

Sto usando il typeahead angolare ui-bootstrap e vorrei usarlo come un modo per raccogliere molte scelte, quindi dovrei ottenere il valore selezionato quando viene avviato il metodo selectMatch ma non riesco a trovare come fare quello nel mio 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">

Se guardo il valore selezionato, ottengo il cambiamento ogni volta che viene premuto un tasto ...

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

Ho capito che il metodo selectMatch è quello che viene chiamato quando l'utente preme Invio o fa clic sull'elenco ma non so come richiamare su quello ...

Grazie !

Risposte:


250

C'è un modo migliore per farlo ora. È stato aggiunto un nuovo metodo di callback

Nel file del controller aggiungere quanto segue:

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

In vista aggiungere quanto segue:

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

Vedere le specifiche di typeahead per ulteriori informazioni (cercare onSelect).

Controlla se i seguenti URL aiutano 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/


2
Grazie! Ha funzionato come un fascino. Questo dovrebbe probabilmente essere documentato ufficialmente nella pagina di riferimento sotto l'intestazione Typeahead
ariestav

29
Qualcuno ha idea di cosa siano effettivamente gli oggetti $ item $ model $ label in quel tipo di callbackeahead-on-select = 'onSelect ($ item, $ model, $ label)'?
AardVark71

@ Matt, possiamo comunque fare un postback usando $ http con l'evento onSelect?
Pratik Gaikwad

15
@ AardVark71 $ item $ model $ label queste tre proprietà sono rispettivamente come sotto. Se stai vincolando un array JSON di oggetti con più di una proprietà, otterrai l'elemento selezionato in $ item con tutte le proprietà. $ model è un modello angolare integrato utilizzato che memorizzerà l'elemento selezionato. valore e $ lable fornirà il valore visualizzato nella casella di testo dopo la selezione. Quindi, in breve, molte volte $ label sarà uguale a $ model. Spero che questo chiarisca il tuo dubbio.
Pratik Gaikwad

16
@ AardVark71 E 'più facile da spiegare se l'espressione è come: state.id as state.name for state in states. In questo caso $itemè state, $ modello è state.id, ed $labelèstate.name
Aximili

10

Modifica: questo metodo non è il migliore ora. È meglio usare il callback onSelect come spiegato nella risposta sopra questa.

Ho scoperto come fare per fare quello che volevo. Ho visto che esiste un attributo modificabile typeahead e se è impostato su false, il valore selezionato cambia solo quando viene selezionato un valore dal modello. E così $ watch funziona bene per controllare quando viene selezionato un nuovo valore.

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

2

Di seguito dovrebbe essere il tuo codice 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)' />

basta aggiungere il tipo head-on-select nel tag di input con la funzione di callback.

Il seguito andrebbe all'interno del controller

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

all'interno di $ item otterrai l'intero oggetto che hai passato nella matrice principale dell'elenco dei suggerimenti


0

provare quanto segue prima della convalida

 modelCtrl.$setValidity('editable', true);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.