web-dev-qa-db-fra.com

AngularJS ng-options avec plusieurs champs

J'ai une collection d'objets avec les informations de l'utilisateur.

"Id": "1",
"Firstname": "ABCDEF",
"Lastname": "GHIJK",
"Middlename": ""

Dans mes options de sélection, je souhaite afficher deux champs - Firstname Lastname. Je ne comprends pas comment le faire et comment le lier à ng-model.

javascripthtmlangularjs
40
ChruS

Vous pouvez essayer ceci:

<select 
  name="users" 
  ng-model="selectedUser" 
  ng-options="user.Id as user.Firstname + ' ' + user.Lastname for user in users">
</select>

Plus d'informations dans la documentation: https://docs.angularjs.org/api/ng/directive/select

94
Maxence

Considérant que le format de votre objet tableau est comme ça.

$scope.userInfo = [
                    {"Id": "1", "Firstname": "ACDEF", "Lastname": "GHIJK", "Middlename": ""},
                    {"Id": "2", "Firstname": "BADEF", "Lastname": "HIGJK", "Middlename": ""},
                    {"Id": "3", "Firstname": "CDBEF", "Lastname": "IIHJK", "Middlename": ""},
                ]

Vous pouvez afficher deux champs de ce type et les lier au modèle comme indiqué ci-dessous.

<select ng-model="userInfo" ng-options="s.Firstname +' '+ s.Lastname for s in userInfo" class="span2"> </select>
12
code_wrangler

Juste une mise à jour supplémentaire, 

Je devais montrer le nom de famille entre crochets alors voici comment j'ai modifié la réponse et je l’ai fait fonctionner.

<select 
   name="users" 
   ng-model="selectedUser" 
   ng-options="user.Id as user.Firstname + ' (' + user.Lastname + ') ' for user in users">
</select>
3
manoj

Il existe toujours un scénario non ng-options, dans lequel vous pouvez lier deux paramètres à partir de l’élément ng-repeat:

  <select name="user" ng-model="vm.asignedUser">
    <option value="">Select user</option> 
    <option value="{{ {'name':user.name, 'id': user.id} }}" ng-repeat="user in vm.users">
      {{ user.nombreLargo }}
    </option>
  </select>
0
Juan Garassino

Cela a fonctionné pour moi:

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select>

Source: https://groups.google.com/d/msg/angular/ljJd5x1Tgrk/bZuVWCA1hO4J

0
Scott