web-dev-qa-db-fra.com

Angularjs ng Option avec tableau

Je veux ajouter une sélection html avec les options AM, PM avec angularjs, ce dont j'ai besoin c'est que la clé et la valeur de l'option soient les mêmes:

<option value="AM">AM</option>
<option value="PM">PM</option>

Mon html ressemble à ceci

<select ng-model="ampm" ng-options="k as v for (k , v) in ampms"></select>

et mon contrôleur ressemble

  $scope.ampm = (new Date().getHours()) >= 12 ? 'PM' : 'AM';
  $scope.ampms ={"AM":"AM","PM":"PM"};

et tout fonctionne bien.

Ma question est pourquoi je ne peux pas avoir la même chose quand j'ai utilisé un tableau (j'ai essayé toutes les options dans les options ng) comme ceci

$scope.ampms =["AM","PM"];

quoi que je fasse j'obtiens toujours ceci

<option value="0">AM</option>
<option value="1">PM</option>

Ce que je veux, c'est utiliser un tableau comme ci-dessus avec l'option a la clé et la valeur la même.

angularjshtml-select
20
ibmkhd

Il s'agit d'un comportement par défaut de ng-options dans Angular. Si vous ne spécifiez pas de nom de clé, angular choisira automatiquement d'utiliser l'index plutôt qu'une clé. Le code qui fait cela peut être vu sur ligne 405 dans/src/ng/directives/select.js sur le référentiel Github d'Angular .

Il ne peut même pas être forcé par "valeur comme valeur pour (index, valeur) dans les valeurs".

Mais comme dnc253 vient de me battre avec sa réponse (il est apparu pendant que je tapais) ... vous n'avez pas à vous en soucier, Angular fait tout pour vous automatiquement .

10
Ben Lesh

Avec AngularJS, vous n'avez pas à vous soucier de la valeur de l'option. Toutes les sélections que j'ai vues avec ng-options ont des valeurs de 0 à n'importe quoi. Si vous recherchez simplement une liste déroulante avec les deux options, cela peut être aussi simple que

<select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']"></select>

Voir http://jsfiddle.net/EyBVN/1/

26
dnc253

J'ai trouvé un moyen de placer des données spécifiques dans la valeur des options pour une sélection. Vous devez ajouter un attribut ng-repeat à la balise option à l'intérieur de la balise select:

<select id="{{question.id}}" name="{{question.id}}" 
    class="{{question.inputclass}}" ng-required="question.required" 
    title="{{question.title}}">
  <option value=""></option>
  <optgroup ng-repeat="group in question.data" label="{{group.group}}">
    <option ng-repeat="item in group.data" value="{{item.value}}" 
        ng-selected="{{item.value == question.defaultValue}}">
          {{item.description}}
    </option>
  </optgroup>
</select>

En prime, j'ai laissé les balises de groupe d'options en place pour servir d'exemple à tout le monde.

Le question.dataJSON est:

[
  {"group":"Canada","data":[{"value":"Ontario","description":"Toronto"},
                            {"value":"Quebec","description":"Quebec City"},
                            {"value":"Manitoba","description":"Winnipeg"}
                           ]
  },
  {"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"},
                            {"value":"Nayarit","description":"Tepic"}
                           ]
  },
  {"group":"United States of America","data":[
                            {"value":"Alabama","description":"Montgomery"},
                            {"value":"Georgia","description":"Atlanta"},
                            {"value":"Mississippi","description":"Jackson"},
                            {"value":"Louisiana","description":"Baton Rouge"},
                            {"value":"Texas","description":"Ausint"}
                           ]
  }
]
2
Adam Zuckerman