AngularJS BootstrapUI Typeahead avec l'objet et fonctionnalité de sélection

j'essaie D'implémenter une tête de typographie en angle en utilisant http://angular-ui.github.io/bootstrap/, où le champ tête de saisie affiche les adresses complètes mais une fois cliqué un autre champ est rempli avec juste le code postal pour cette adresse. J'essaie d'utiliser ng-change ou ng-click pour ça, mais sans succès..

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>

des idées?

29
demandé sur jamuraa 2013-07-25 14:58:32

6 réponses

la directive typeahead de http://angular-ui.github.io/bootstrap/ est très, très flexible et il y a plusieurs façons d'atteindre la fonctionnalité désirée. Je vais présenter 2 d'entre eux ici.

tout D'abord, la directive typeahead utilise une syntaxe très similaire à celle de L'AngularJS sélectionner la directive. Cela vous donne le contrôle total sur une étiquette affichée 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 qu'une étiquette et liez le code postal à selPcode directement:

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

La clé ici est l' as la partie est dans le typeahead expression: typeahead="state.postcode as state.address for state in states

Notez aussi que j'utilise le typeahead-editable="false" attribut pour lier le modèle seulement quand une sélection est faite. 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-select l'attribut: 

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

Il vous permet de spécifiez un rappel lorsqu'une correspondance est sélectionnée. Un violon de travail ici: http://jsfiddle.net/t8BV2/

comme dernière note:ng-change ne fonctionnera pas ici car il réagirait à n'importe quel changement dans l'entrée alors que vous voulez capturer la sélection seulement. ng-click n'est pas d'une grande utilité non plus car il réagit en cliquant sur le champ d'entrée et non pas sur le popup des correspondances. En plus de cela, il ne réagirait pas sur les sélections faites en utilisant keayboard.

95
répondu pkozlowski.opensource 2013-07-25 11:36:30

j'ai trouvé un moyen de résoudre cela en configurant la tête de saisie comme ceci:

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

renvoie un objet d'État à la propriété model qui peut être initialisée en mettant la valeur à l'objet approprié:

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

violon de travail ici: https://jsfiddle.net/0y3ntj4x/3/

je pense que ce scénario est absent de la documentation angulaire-bootstrap pour la tête de type.

3
répondu Paul Taylor 2016-01-27 10:04:08

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'interface utilisateur-Bootstrap de L'Angular. Voir ici: jsfiddle.net/jLupa/87/ . Le seul changement que j'ai fait était la mise à jour à la version 0.10.0, et vous pouvez voir que les deux boîtes de saisie résolvent au code postal.

2
répondu Brian Graham 2014-03-16 13:51:14

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

j'espère aider quelqu'un

2
répondu Math 2014-05-23 07:09:17

voici une autre liste de valeurs de la directive angularjs qui utilise la typeahead de twitter:https://github.com/mihaigiurgeanu/lov-typeahead