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 !

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/


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

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


0

intente lo siguiente antes de la validación

 modelCtrl.$setValidity('editable', true);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.