angular ui-bootstrap typeahead callback en selectMatch?

92

Estoy usando el tipo angular ui-bootstrap typeahead y me gustaría usarlo como una forma de elegir muchas opciones, por lo que necesitaría obtener el valor seleccionado cuando se inicie el método selectMatch pero no puedo encontrar cómo hacerlo que en mi controlador

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

Si miro el valor seleccionado, obtengo el cambio cada vez que se presiona una tecla ...

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

Entendí que el método selectMatch es el que se llama cuando el usuario presiona enter o hace clic en la lista, pero no sé cómo tener una devolución de llamada sobre eso ...

Gracias !

mchasles
fuente

Respuestas:

250

Hay una mejor manera de hacer esto ahora. Se ha agregado un nuevo método de devolución de llamada

En el archivo del controlador, agregue lo siguiente:

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

A la vista, agregue lo siguiente:

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

Consulte las especificaciones de typeahead para obtener más información (busque onSelect).

Compruebe si las siguientes URL ayudan a 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/

Mate
fuente
2
¡Gracias! Trabajado como un encanto. Esto probablemente se debe documentar oficialmente en la página de referencia bajo el título TYPEAHEAD: angular-ui.github.io/bootstrap
ariestav
29
¿Alguien tiene una idea de lo que son realmente los objetos $ item $ model $ label en ese tipo de devolución de llamadaahead-on-select = 'onSelect ($ item, $ model, $ label)'?
AardVark71
@Matt, ¿hay alguna forma de que podamos hacer devolución de datos usando $ http con el evento onSelect?
Pratik Gaikwad
15
@ AardVark71 $ item $ model $ label estas tres propiedades son las siguientes respectivamente. Si está vinculando una matriz JSON de objetos que tienen más de una propiedad, obtendrá el elemento seleccionado en $ elemento con todas las propiedades. $ model es un modelo angular incorporado que almacenará el item.value seleccionado y $ lable le dará el valor que se muestra en el cuadro de texto después de la selección. Entonces, en pocas ocasiones, $ label será igual a $ model. Espero que esto aclare tu duda.
Pratik Gaikwad
16
@ AardVark71 Es más fácil de explicar si la expresión es como: state.id as state.name for state in states. En ese caso $itemes state, $ modelo es state.id, y $labelesstate.name
Aximili
10

Editar: este método no es el mejor ahora. Es mejor usar la devolución de llamada onSelect como se explica en la respuesta anterior a esta.

Descubrí cómo hacer lo que quería. Vi que hay un atributo que se puede editar con anticipación y, si se establece en falso, el valor seleccionado cambia solo cuando se selecciona un valor del modelo. Y entonces el $ watch está funcionando bien para verificar cuando se selecciona un nuevo valor.

<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
fuente
2

Lo siguiente debe ser su 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)' />

simplemente agregue typeahead-on-select en la etiqueta de entrada con la función de devolución de llamada.

Lo siguiente iría dentro del controlador

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

dentro de $ item obtendrá el objeto completo que ha pasado en la matriz principal de la lista de sugerencias

Sandeep Gantait
fuente
0

intente lo siguiente antes de la validación

 modelCtrl.$setValidity('editable', true);
Mohamed.Abdo
fuente