Javascript Girl
  1. Javascript Girl
  3. Angular-ui-select – comment lier la propriété object à ng-model
Intereting Posts
Ajax obtient l'identifiant de l'élément où il existe plusieurs liens avec des éléments Faire référence à une valeur JavaScript avant sa déclaration – quelqu'un peut-il expliquer cela Gestionnaire d'événements de stockage HTML5 / JS Impossible de lire la propriété 'removeAttribute' of null: Vous ne trouvez pas la source Est-ce que Ecmascript 6 prend en charge une propriété mutable __proto__? Comment détecter les sauts de ligne dans une entrée de zone de texte? Modifier la valeur textarea ne fonctionne pas Authentifiez l'application HTML5 enveloppée avec Phonegap (ou équivalent) Contrôles de javascript vidéo HTML5 – redémarrez la vidéo Création personnalisée de plugins cordova pour le projet ionic2 Comment compiler de nouveaux modèles à l'exécution dans un météore? Initier un téléchargement de fichier qui fonctionne bien, même dans IE? Cartes Google – gardez le centre lors du zoom Problème d'objet d'historique avec React-Router Cross-browser et cross-device audio

Angular-ui-select – comment lier la propriété object à ng-model

J'utilise l'angular-ui-select dans un simple formulaire d'inscription d'utilisateur: 

<ui-select ng-model="user.countryCode" convert-to-string theme="selectize" class="dropdown"> <ui-select-match placeholder="{{::strings('userDetails.countryPlaceholder')}}">{{$select.selected.name}} </ui-select-match> <ui-select-choices repeat="country in countries"> <span ng-bind-html="country.name | highlight: $select.search"></span> </ui-select-choices> </ui-select>

Voici ma définition de tableau de pays: 

 $scope.countries = [ {name: 'Afghanistan', code: 'AF'}, {name: 'Albania', code: 'AL'}, {name: 'Australia', code: 'AU'}, {name: 'Austria', code: 'AT'}, {name: 'Azerbaijan', code: 'AZ'}, {name: 'Belarus', code: 'BY'}, {name: 'Belgium', code: 'BE'}, {name: 'Belize', code: 'BZ'}, {name: 'Benin', code: 'BJ'} ];

Je crée l'objet utilisateur dans mon html, chaque champ possédait un modèle ng lié à certaines propriétés de l'utilisateur. Lorsque j'utilise une entrée simple comme FirstName, c'est facile: 

 <input class="form-control" type="text" name="firstName" ng-model="user.firstName"/>

Mais avec le menu déroulant – je souhaite que le nom du pays soit affiché dans les options de la liste déroulante et que son code soit placé dans l'objet utilisateur. Je veux éviter d'écrire le code dans le contrôleur pour cela. (C.-à-d. Scope.user.countryCode = $ scope.country.selected.code;)

Je pense que vous pouvez le faire: 

 <ui-select-choices repeat="country.code as country in countries"> <span ng-bind-html="country.name | highlight: $select.search"></span> </ui-select-choices>

À partir de la documentation: https://github.com/angular-ui/ui-select/wiki/ui-select-choices

Exemple: Reliure de la propriété individuelle

Dans la répétition de l'ui-select-choices, identifiez la propriété à laquelle vous souhaitez vous lier; repeat="item.id as item in cards"> .

Vous pouvez utiliser un filtre personnalisé pour transformer de manière transparente votre objet en un tableau:

https://code.angularjs.org/1.4.7/docs/error/filter/notarray

https://github.com/petebacondarwin/angular-toArrayFilter 

 //in your view(aaa.html) part / <select ng-model="Choices" ng-options="choice.code as choice.name for choice in countries ">

// dans votre fichier de contrôle $ scope.user.countryCode = "Choix";