AngularJS - attribut de valeur pour select

Question

Les données JSON source sont:

 [
  {"name":"Alabama","code":"AL"},
  {"name":"Alaska","code":"AK"},
  {"name":"American Samoa","code":"AS"},
  ...
]
 

J'essaie

 ng-options="i.code as i.name for i in regions"
 

mais je reçois:

 <option value="?" selected="selected"></option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">American Samoa</option>
 

pendant que je m'attends à:

 <option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
 

Alors, comment obtenir des attributs de valeur et se débarrasser de "?" article?

En passant, si je définis les champs $ scope.regions sur un JSON statique au lieu du résultat de la demande AJAX, l'élément vide disparaît.

Answer 1

Ce qui vous a d'abord essayé devrait fonctionner, mais le HTML n'est pas ce que nous attendons. J'ai ajouté une option pour gérer l'initiale "aucun élément n'est sélectionné" cas:

<select ng-options="region.code as region.name for region in regions" ng-model="region">
   <option style="display:none" value="">select a region</option>
</select>
<br>selected: {{region}}

Le ci-dessus génère ce code HTML:

<select ng-options="..." ng-model="region" class="...">
   <option>style="display:none" value class>select a region</option>
   <option value="0">Alabama</option>
   <option value="1">Alaska</option>
   <option value="2">American Samoa</option>
</select>

Violon

Même si Angulaire usages numériques entiers pour la valeur, le modèle (c'est à dire, $champ d'application.région) sera mis à AL, AK, ou QUE, comme vous le souhaitez. (La valeur numérique est utilisée par Angulaire pour la recherche de la bonne entrée de ce tableau lorsqu'une option est sélectionnée dans la liste.)

BTW, j'ai trouvé cela très déroutant lorsque j'ai commencé à apprendre Angulaire met en œuvre son "select" de la directive.

Answer 2

Vous ne pouvez pas vraiment faire cela si vous ne les construisez pas vous-même.

 <select ng-model="foo">
   <option ng-repeat="item in items" value="{{item.code}}">{{item.name}}</option>
</select>
 

MAIS ... ça n'en vaut probablement pas la peine. Il est préférable de le laisser fonctionner comme prévu et de laisser Angular gérer le fonctionnement interne. Angular utilise l’index de cette façon, ce qui vous permet d’utiliser un objet entier comme valeur. Vous pouvez donc utiliser une liaison déroulante pour sélectionner une valeur entière plutôt que simplement une chaîne, ce qui est assez impressionnant:

 <select ng-model="foo" ng-options="item as item.name for item in items"></select>

{{foo | json}}
 

Answer 3

Si vous utilisez le track by option, le value attribut est correctement écrit, par exemple:

 <div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]">
    <select ng-model="foo" ng-options="x for x in a track by x.value"/>
</div>
 

produit:

 <select>
    <option value="" selected="selected"></option>
    <option value="15">one</option>
    <option value="20">two</option>
</select>
 

Answer 4

Si le modèle spécifié de la liste déroulante, n'existe pas, alors angulaire de générer un vide options de l'élément. Ainsi, vous aurez à spécifier explicitement le modèle sur la sélection comme ceci:

<select ng-model="regions[index]" ng-options="....">

Reportez-vous à la suivante, comme il a été répondu avant:

Pourquoi ne angularjs inclure une option vide de sélectionner et de ce violon

Mise à jour: Essayez plutôt ceci:

<select ng-model="regions[index].code" ng-options="i.code as i.name for i in regions">
</select>

or

<select ng-model="regions[2]" ng-options="r.name for r in regions">
</select>

Notez qu'il n'y a aucun vide les options de l'élément dans le select.

Answer 5

Vous pouvez modifier votre modèle pour ressembler à ceci:

$scope.options = { "AL" : "Alabama", "AK" : "Alaska", "AS" : "American Samoa" };

Alors utilisez <select ng-options="k as v for (k,v) in options"></select>