AngularJS BootstrapUI Typeahead avec objet & fonctionnalité de sélection
Je suis en train de mettre en œuvre un typeahead Angulaire à l'aide de http://angular-ui.github.io/bootstrap/, où la typeahead champ affiche les adresses complètes, mais une fois cliqué sur un autre champ est rempli avec juste le code postal pour l'adresse. Je suis en train d'utiliser ng-modification ou ng-click pour cela, mais sans succès..
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>Des idées?
Vous devez vous connecter pour publier un commentaire.
La typeahead directive de http://angular-ui.github.io/bootstrap/ est très, très flexible et il existe de nombreuses façons de réaliser la fonctionnalité désirée. Je vais présenter 2 d'entre eux ici.
Tout d'abord, la typeahead directive utilise la syntaxe très similaire à la AngularJS sélectionnez directive. Cela vous donne le plein contrôle sur une affiche de l'étiquette et les données liées en tant que valeur de modèle. Donc, ce que vous pourriez faire est de simplement afficher l'adresse comme un label et de lier le code postal de la
selPcodedirectement:La clé ici est la
aspartie est dans letypeaheadexpression:typeahead="state.postcode as state.address for state in statesAussi, veuillez noter que je suis en utilisant le
typeahead-editable="false"attribut de lier modèle uniquement lorsqu'une sélection est effectuée. Un travail jsFiddle ici: http://jsfiddle.net/jLupa/Une autre solution, si vous avez vraiment besoin d'utiliser une fonction de rappel est d'utiliser le
typeahead-on-selectattribut:Il vous permet de spécifier un rappel lorsqu'un match est sélectionné. Un travail de violon ici:
http://jsfiddle.net/t8BV2/
Que la dernière note:
ng-changene marchera pas ici, car il permettrait de réagir à tout changement dans l'entrée que vous souhaitez capturer uniquement la sélection.ng-clickn'est pas d'une grande utilité, soit parce qu'il réagit en cliquant sur le champ de saisie et de ne pas les matches de la popup. Sur le dessus de cela, il ne serait pas réagir sur les sélections effectuées par l'aide de keayboard.typeahead-on-select@pkozlowski-opensource 's grande solution a un inconvénient: vous ne pouvez pas initialiser le typeahead de la ng-model propriété de cette façon, au moins si vous le souhaitez afin d'afficher la description de l'élément et non pas son code.
J'ai trouvé une façon de résoudre ce problème en configurant le typeahead comme ceci:
Cela retourne un objet d'état de la propriété modèle qui peut être initialisé par la mise en valeur de l'objet approprié:
De travail violon ici: https://jsfiddle.net/0y3ntj4x/3/
Je pense que ce scénario est absent de l'angulaire de bootstrap, documentation pour la typeahead.
Voulais juste ajouter à la réponse fournie par @pkozlowski.opensource - le comportement affiché dans jsfiddle.net/jLupa ne fonctionne plus avec la version 0.10.0 de l'Angulaire de l'INTERFACE utilisateur-Bootstrap. Voir ici: jsfiddle.net/jLupa/87/. La seule modification que j'ai faite a été mise à jour pour la version 0.10.0, et vous pouvez voir que les deux zones de saisie de résoudre le code postal.
J'ai un problème similaire,
<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 }mais dindt de travail, avec l'utilisation d'un service de cette façon
$scope.countries = [];_services.getcountries(function(result) {
$scope.countries = result;
});
et a été résolu avec
$scope.countries = [];_services.getcountries(function(result) {
$.each(result, function(i, o) {
$scope.countries.push(o);
});
});
Je l'espère, aider quelqu'un
C'est une autre liste de valeurs angularjs directive qui est à l'aide de twitter typeahead: https://github.com/mihaigiurgeanu/lov-typeahead. Vous pouvez l'utiliser avec bootstrap, mais aussi sans bootstrap.
Si vous utilisez de verdure, vous pouvez l'installer en faisant:
modelCtrl.$setValidity('modifiable', true);