angularjs - modal - ui bootstrap tpls 2.5 0

AngularJS BootstrapUI Typeahead con funcionalidad de selección y objeto

Question

Estoy intentando implementar un typeahead en Angular usando http://angular-ui.github.io/bootstrap/ , donde el campo typeahead muestra las direcciones completas, pero una vez que se hace clic en otro campo, se rellena solo con el código postal de esa dirección. Estoy tratando de usar ng-change o ng-click para esto, pero sin ningún éxito ...

http://jsfiddle.net/UxTBB/2/

angular.module(''myApp'', [''ui.bootstrap''])
.controller("mainCtrl", function ($scope) {
$scope.selected = '''';
$scope.states = [{postcode:''B1'',address:''Bull ring''},{postcode:''M1'',address:''Manchester''}];
$scope.setPcode = function(site) {
$scope.selPcode = site.postcode;
};
});
<div class="container">
<div ng-controller="mainCtrl" class="row-fluid">
<form class="row-fluid">
<div class="container-fluid">
postcode <input type="text" ng-model="selPcode" />
typeahead <input type="text" ng-change="setPcode(site)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />
</div>
</form>
</div>
</div>

¿Algunas ideas?

Answer 1

Esta es otra lista de valores de la directiva angularjs que utiliza el typeahead de twitter: https://github.com/mihaigiurgeanu/lov-typeahead . Puedes usarlo con bootstrap, pero también sin bootstrap.

Si está utilizando Bower, puede instalarlo haciendo:

bower install lov-typeahead --save

Answer 2

La directiva typeahead de http://angular-ui.github.io/bootstrap/ es muy, muy flexible y hay muchas formas de lograr la funcionalidad deseada. Estoy presentando 2 de ellos aquí.

En primer lugar, la directiva typeahead usa una sintaxis muy similar a la directiva de selección AngularJS. Esto le da control total sobre una etiqueta mostrada y los datos enlazados como valor de modelo. Entonces, lo que podría hacer es simplemente mostrar la dirección como una etiqueta y vincular el código postal al selPcode directamente:

<input type="text" ng-model="selPcode" typeahead="state.postcode as state.address for state in states | filter:$viewValue" typeahead-editable="false" />

La clave aquí es que la parte está en la expresión typeahead="state.postcode as state.address for state in states : typeahead="state.postcode as state.address for state in states

Además, tenga en cuenta que estoy usando el typeahead-editable="false" para enlazar el modelo solo cuando se realiza una selección. Un jsFiddle en funcionamiento aquí: http://jsfiddle.net/jLupa/

Otra solución, si realmente necesita usar una función de devolución de llamada, es usar el typeahead-on-select :

<input type="text" typeahead-on-select="setPcode($item)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />

Le permite especificar una devolución de llamada cuando se selecciona una coincidencia. Un violín de trabajo aquí: http://jsfiddle.net/t8BV2/

Como la última nota: ng-change no funcionará aquí ya que reaccionaría ante cualquier cambio en la entrada, mientras que solo desea capturar la selección. ng-click no es de mucha utilidad, ya que reacciona al hacer clic en el campo de entrada y no en la ventana emergente de coincidencias. Además de esto, no reaccionaría ante las selecciones realizadas mediante el uso de keayboard.

Answer 3

La gran solución de @ pkozlowski-opensource tiene un inconveniente: no puede inicializar el typeahead desde la propiedad ng-model de esta manera, al menos si desea que muestre la descripción del elemento y no su código.

Encontré una forma de resolver esto configurando el typeahead así:

<input type="text" ng-model="selected" typeahead="state as state.address for state in states | filter:$viewValue" />

Esto devuelve un objeto de estado a la propiedad del modelo que se puede inicializar estableciendo el valor en el objeto apropiado:

 $scope.selected = {postcode:''M1'',address:''Manchester''};

Trabajando con el violín aquí: https://jsfiddle.net/0y3ntj4x/3/

Creo que este escenario falta en la documentación angular-bootstrap para el typeahead.

Answer 4

Solo quería agregar a la respuesta proporcionada por @ pkozlowski.opensource: el comportamiento mostrado en jsfiddle.net/jLupa ya no funciona con la versión 0.10.0 de UI-Bootstrap de Angular. Vea aquí: jsfiddle.net/jLupa/87/. El único cambio que hice fue actualizar a la versión 0.10.0, y puedes ver que ambos cuadros de entrada se resuelven en el código postal.

Answer 5

Tengo un problema similar,

<input type="text" ng-model="select" typeahead="a as a.Value for a in countries | filter:{{ Value:$viewValue }} "class="form-control" typeahead-editable="false" >

{ Code: AL,ParentCode: null,Value: Albania,Id: 1206,Name: countries }

Pero no trabaje, con el uso de un servicio de esta manera.

$scope.countries = []; _services.getcountries(function(result) { $scope.countries = result; });

y fue resuelto con

$scope.countries = []; _services.getcountries(function(result) { $.each(result, function(i, o) { $scope.countries.push(o); }); });

Espero ayudar a alguien

Answer 6

try the following before saving / validating

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