ng-options avec un simple tableau init

188

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

J'ai un tableau simple et je veux lancer une sélection avec. 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 cela n'a pas fonctionné.)

Éditer:

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

Dragu
la source

Réponses:

306

Vous aviez en fait raison lors 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

L'astuce est qu'AngularJS écrit les clés sous forme de nombres de 0 à n de toute façon, et effectue la conversion lors de la mise à jour du modèle.

En conséquence, le HTML semblera incorrect mais le modèle sera toujours défini correctement lors du choix d'une valeur. (c'est-à-dire qu'AngularJS traduira '0' en 'var1')

La solution d'Epokk fonctionne également, mais si vous chargez des données de manière asynchrone, vous constaterez peut-être qu'elle ne se met pas toujours à jour correctement. L'utilisation de ngOptions s'actualisera correctement lorsque la portée changera.

James Davies
la source
1
Vous êtes hors sujet. Vous n'avez pas compris les instructions. Il veut valuedans le sien select.
EpokK
10
J'ai compris les instructions, mais il est fort probable que son intention soit de lier la «valeur» au modèle, et il ne comprend pas ce qui se passe en raison de la façon dont AngularJs rend la balise.
James Davies
3
Cela fonctionne si vous obtenez la valeur de select avec angular, mais dans mon cas (c'est-à-dire le formulaire de soumission classique), les valeurs seront 0,1,2,3, pas var1, var2, var3
Dragu
1
J'ai supposé que vous vous liez au modèle, mais si vous utilisez simplement AngularJS pour rendre un formulaire soumis en externe à angular, utilisez la solution d'EpokK.
James Davies
69
Est-ce juste moi, ou est-ce la syntaxe la plus floue et la plus floue qui soit?
fool4jesus
35

Vous pouvez utiliser ng-repeatavec optioncomme 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, formvous pouvez obtenir la valeur de l'entrée masquée.


DEMO

ng-sélectionné ng-répéter

EpokK
la source
Si vous avez diminué ma réponse, vérifiez ma nouvelle solution.
EpokK
21

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.

Je préfère cette méthode à ng-options de toute façon, car ng-options ne fonctionne qu'avec des tableaux. ng-repeat fonctionne également avec des objets de type json.

iPirat
la source
1
ng-optionsfonctionne également avec les sources de données d'objets. Voir docs.angularjs.org/api/ng/directive/select
Charlie Schliesser
1
Bien que d'autres aient proposé des solutions de contournement, cette solution est de loin la plus élégante et la plus proche du style html ancien, fonctionne à la fois avec une reliure de modèle angulaire et une forme submital. Merci!
Fadi Chamieh
4
ng-selected n'a pas besoin du guidon puisqu'il s'agit d'une directive angulaire. Excellente solution.
Kasey Speakman
20

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>

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

Ida N
la source
1
Cette solution était la seule qui fonctionnait pour moi pour sélectionner la valeur initiale dans un tableau de chaînes.
Ena
ouais ça devrait être la réponse, le morceau fait la magie pour moi.
Gurnard
Je m'attendais le moins après avoir suivi les solutions ci-dessus, mais c'était la solution de facilité
sac Dahal
10
<select ng-model="option" ng-options="o for o in options">

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

plunker

Boîte à outils
la source