564 votes

Comment définir la valeur de la propriété dans angularjs ng-options?

Voici ce qui semble déranger beaucoup de gens (moi y compris). Lors de l'utilisation de ng-directive options dans angluarjs pour remplir Sélectionnez-tag des options que je n'arrive pas à comprendre comment définir la valeur d'une option. La documentation de cette est vraiment pas clair, au moins pour un con comme moi.

Je peux mettre le texte d'une option facilement comme ceci:

ng-options='select p.text for p  in resultOptions'

si le résultat des options sont par exemple:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

Devrait être (et est probablement le plus simple pour définir les valeurs d'option, mais jusqu'à présent je n'ai tout simplement pas l'obtenir.

Toute aide serait grandement appréciée.

709voto

Umur Kontacı Points 12524

http://docs.angularjs.org/api/ng.directive:select

ngOptions(facultatif) – {comprehension_expression=} – dans l'un des formes suivantes:

pour le tableau des sources de données:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
pour les sources de données d'objets:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object

Dans votre cas, il devrait être

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

Mise à jour

Avec les mises à jour sur Angulaire, il est désormais possible de définir la valeur réelle pour l' value attribut de l' select élément avec track by expression.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

136voto

frm.adiputra Points 879

Comment la valeur des attributs reçoit sa valeur:

  • lors de l'utilisation de tableau en tant que source de données, il sera l'indice de l'élément du tableau à chaque itération;
  • lors de l'utilisation de l'objet comme source de données, il sera le nom de la propriété à chaque itération.

Donc dans votre cas, il devrait être:

obj = { '1': '1st', '2': '2nd' };

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

123voto

Bruno Gomes Points 606

J'ai eu ce problème aussi. Je n'étais pas capable de mettre ma valeur en ng-options. Chaque option est de générer a été fixé à 0, 1, ..., n.

Pour bien le faire, je l'ai fait dans mon ng-options de quelque chose comme...

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
<option value="">--Rooms--</option>
</select>

Utilisation de la "piste" pour définir ma valeur avec de la place.prix

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

Je l'apprends ici: http://gurustop.net/blog/2014/01/28/common-problems-and-solutions-when-using-select-elements-with-angular-js-ng-options-initial-selection/

Wacth la vidéo, son une belle classe :)

47voto

neemzy Points 790

Si vous voulez changer la valeur de votre option éléments parce que la forme sera éventuellement soumise au serveur, au lieu de faire ceci :

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

Vous pouvez faire ceci :

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

La valeur attendue sera ensuite envoyé via le formulaire sous le nom correct.

26voto

Philip Bulley Points 1675

Pour envoyer une valeur personnalisée appelé my_hero sur le serveur à l'aide d'une forme normale soumettre:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

Le serveur recevra iron ou super la valeur de my_hero.

Similaire à la réponse par @neemzy, mais la spécification des données distinctes pour l' value d'attribut.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X