angularjs - example - typeahead on select

angular ui-bootstrap typeahead callback en selectMatch?

Question

Estoy usando el tipo de script ui-bootstrap angular y quisiera usarlo como una forma de elegir muchas opciones, así que necesitaría obtener el valor seleccionado cuando se lanza el método selectMatch, pero no puedo encontrar cómo hacerlo eso 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) {... });

Obtuve 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 hacer una devolución de llamada en ese ...

Gracias !

Answer 1

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

Encontré cómo hacer lo que quería. Vi que hay un atributo de escritura anticipada y si se establece en falso, el valor seleccionado cambia solo cuando se selecciona un valor del modelo. Y entonces, el $ watch funciona bien para verificar cuándo 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);
     });
}

Answer 2

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

En el archivo 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 la especificación typeahead para obtener más información (busque onSelect).

Verifique 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/

Answer 3

prueba lo siguiente antes de la validación

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

Answer 4

Lo siguiente debe ser tu 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 $ artículo obtendrás el objeto completo que has pasado en la matriz principal de la lista de sugerencias