Question Comment définir la propriété value dans AngularJS 'ng-options?


Voici ce qui semble déranger beaucoup de gens (y compris moi).

Lorsque vous utilisez le ng-options directive dans AngularJS pour compléter les options pour un <select> tag, je ne peux pas comprendre comment définir la valeur d'une option. La documentation pour cela est vraiment floue - au moins pour un imbécile comme moi.

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

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

Quand resultOptions est par exemple:

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

Il devrait être (et est probablement) la chose la plus simple pour définir les valeurs d'option, mais jusqu'ici je ne comprends pas.


527
2017-08-27 09:13


origine


Réponses:


Voir ngOptions

ngOptions (optionnel) - {comprehension_expression=} - dans l'un des   formes suivantes:

Pour les sources de données de tableau:    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'objet: 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>

Mettre à jour

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

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

Comment se souvenir de ces trucs laids

A tous ceux qui ont du mal à se souvenir de cette forme de syntaxe: je suis d'accord que ce n'est pas la syntaxe la plus simple ou la plus belle. Cette syntaxe est une sorte de version étendue des compréhensions de liste de Python et je sais que cela m'aide à me souvenir très facilement de la syntaxe. C'est quelque chose comme ça:

Code Python:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

C'est en fait la même syntaxe que la première liste ci-dessus. Cependant, dans <select> nous avons généralement besoin de différencier la valeur réelle du code et le texte affiché (l'étiquette) dans un <select> élément.

Comme, nous avons besoin person.id dans le code, mais nous ne voulons pas montrer le id à l'utilisateur; nous voulons montrer son nom. De même, nous ne sommes pas intéressés par le person.name dans le code. Il y a le as mot-clé pour étiqueter des choses. Alors ça devient comme ça:

person.id as person.name for person in people

Ou, au lieu de person.id nous pourrions avoir besoin de la person instance / référence elle-même. Voir ci-dessous:

person as person.name for person in people

Pour les objets JavaScript, la même méthode s'applique également. Rappelez-vous simplement que les objets de l'objet sont déconstruits avec (key, value) paires.


663
2017-08-27 10:33



Comment les attributs de valeur obtiennent sa valeur:

  • Lorsque vous utilisez un tableau comme source de données, ce sera l'indice de l'élément de tableau dans chaque itération;
  • Lorsque vous utilisez un objet comme source de données, ce sera le nom de la propriété dans chaque itération.

Donc, dans votre cas, cela devrait être:

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

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

129
2017-09-12 08:44



J'ai eu ce problème aussi. Je n'ai pas pu définir ma valeur en options ng. Chaque option qui a été générée a été définie avec 0, 1, ..., n.

Pour faire les choses correctement, j'ai fait quelque chose comme ça dans mes ng-options:

HTML:

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

J'utilise "suivi par" pour définir toutes mes valeurs avec room.price.

(Cet exemple craint: parce que s'il y avait plus d'un prix égal, le code échouerait donc soyez sûr d'avoir des valeurs différentes.)

JSON:

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

Je l'ai appris à partir du blog Comment définir la valeur initiale sélectionnée d'un élément select en utilisant Angular.JS ng-options & track par.

Voir la vidéo. C'est une classe sympa :)


116
2018-04-10 19:17



Si vous voulez changer la valeur de votre optionéléments parce que le formulaire sera finalement soumis au serveur, au lieu de le faire,

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

Tu peux le faire:

<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ée via le formulaire sous le nom correct.


46
2018-06-12 16:35



Pour envoyer une valeur personnalisée appelée my_hero au serveur en utilisant un formulaire normal submit:

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 soit iron ou super comme la valeur de my_hero.

Ceci est similaire à la réponse par @neemzy, mais en spécifiant des données séparées pour le value attribut.


25
2017-11-28 19:00



Il semble que ng-options est compliqué (peut-être frustrant) à utiliser, mais en réalité nous avons un problème d'architecture.

AngularJS sert de framework MVC pour une application HTML + JavaScript dynamique. Tandis que son composant (V) View offre un «template» HTML, son but principal est de connecter les actions de l'utilisateur, via un contrôleur, aux changements dans le modèle. Donc le niveau d'abstraction approprié, à partir duquel travailler dans AngularJS, est qu'un élément select définit une valeur dans le modèle à une valeur à partir d'une requête.

  • La manière dont une ligne de requête est présentée à l'utilisateur est la préoccupation de (V) ng-options fournit le for mot-clé pour dicter quel devrait être le contenu de l'élément d'option c'est à dire.  p.text for p in resultOptions.
  • La façon dont une ligne sélectionnée est présentée au serveur est la préoccupation de (M) odel. Donc ng-options fournit le as mot-clé pour spécifier quelle valeur est fournie au modèle comme dans k as v for (k,v) in objects.

La solution correcte de ce problème est alors de nature architecturale et implique la refactorisation de votre HTML afin que le (M) odel effectue la communication du serveur lorsque cela est nécessaire (au lieu de l'utilisateur soumettant un formulaire).

Si une page HTML MVC est inutile sur-ingénierie pour le problème en cours: utilisez ensuite uniquement la partie de génération HTML du composant (V) View d'AngularJS. Dans ce cas, suivez le même schéma que celui utilisé pour générer des éléments tels que &lt;li /&gt;est sous &lt;ul /&gt;'s et placez un ng-repeat sur un élément d'option:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

Comme Kludge, on peut toujours déplacer l'attribut name de l'élément select vers un élément d'entrée caché:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

23
2017-11-16 23:06



Tu peux le faire:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-- METTRE À JOUR

Après quelques mises à jour, utilisateur frm.adiputrala solution c'est beaucoup mieux. Code:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

19
2017-11-01 19:00