web-dev-qa-db-fra.com

ng-options avec un simple tableau init

Je suis un peu confus avec Angular et ng-options.

J'ai un tableau simple et je veux lancer une sélection avec elle. Mais, je veux que les options value = label.

script.js

$scope.options = ['var1', 'var2', 'var3'];

html

<select ng-model="myselect" ng-options="o for o in options"></select>

Ce que je reçois

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

Ce que je veux:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

Alors j'ai essayé:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(Mais ça n’a pas marché.)

Modifier:

Mon formulaire est soumis en externe, c'est pourquoi j'ai besoin de 'var1' comme valeur au lieu de 0.

angularjsng-gridng-options
182
Dragu

En fait, vous avez eu raison de votre troisième tentative.

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

Voir un exemple de travail ici: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

Le truc, c’est que AngularJS écrit quand même les clés sous forme de nombres de 0 à n, et les convertit lors de la mise à jour du modèle.

En conséquence, le code HTML paraîtra incorrect, mais le modèle sera toujours défini correctement lors du choix d'une valeur. (c.-à-d. AngularJS traduira "0" en "var1")

La solution d'Epokk fonctionne également. Toutefois, si vous chargez des données de manière asynchrone, vous risquez de constater qu'elles ne se mettent pas toujours à jour correctement. L'utilisation de ngOptions s'actualisera correctement lorsque la portée changera.

298
James Davies

Vous pouvez utiliser ng-repeat avec option comme ceci:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

Lorsque vous soumettez votre form, vous pouvez masquer la valeur de l'entrée.

DEMO

ng-selectedng-repeat

34
EpokK

Si vous configurez votre sélection comme suit:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

tu auras:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

travail du violon: http://jsfiddle.net/x8kCZ/15/

20
Ida N

vous pourriez utiliser quelque chose comme

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

en utilisant ng-selected vous présélectionnez l'option au cas où myselect serait pré-rempli.

Quoi qu'il en soit, je préfère cette méthode à ng-options, car ng-options ne fonctionne qu'avec des tableaux. ng-repeat fonctionne également avec des objets de type json.

20
iPirat
<select ng-model="option" ng-options="o for o in options">

$ scope.option sera égal à 'var1' après modification, même si vous voyez value = "0" dans le HTML généré

plunker

10
Toolkit