Comment définir l'attribut value dans ng-options pour AngularJS ?

Définition des valeurs dans ng-options pour AngularJS

La directive ng-options d'AngularJS permet aux développeurs de renseigner les options d'un étiqueter. Une question courante qui se pose est de savoir comment définir l'attribut value pour chaque option.

Pour comprendre le mécanisme de définition des valeurs, examinons la syntaxe de ngOptions. Il prend une expression sous l'une de ces formes :

Pour les tableaux :

label for value in array

Pour les objets :

label for (key, value) in object

Considérons l'exemple de tableau suivant :

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

Pour remplir les options à l'aide de ng-options, on peut écrire :

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

Dans ce cas, obj.value déterminera le sélectionné valeur pour chaque option.

Mise à jour : suivi par expression de valeur

Avec les mises à jour récentes d'AngularJS, il est désormais possible de spécifier explicitement la valeur de l'attribut de valeur à l'aide d'un suivi par expression :

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

Mémorisation de la syntaxe

La syntaxe ngOptions peut être difficile à rappeler. Une analogie utile consiste à y penser comme une version étendue des compréhensions de liste de Python :

[x**2 for x in [1, 2, 3, 4, 5]]

Cependant, dans ng-options, nous distinguons la valeur et le texte affiché pour chaque option en utilisant le mot-clé as :

person.id as person.name for person in people

Pour les objets JavaScript, la syntaxe est similaire, en utilisant des paires (clé, valeur) :

for (key, value) in object

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn

Article précédent：Extensions JSON pour écrire des fichiers de configuration et analyser les données Article suivant：Utilisation avancée de React Refs : normalisation, clonage et liaison

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

2

1772

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

10

1915

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

1627

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1538

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

1574

Rubriques connexes

Plus>

• Connaissances nécessaires pour le front-end Web
• Le rôle du routeur
• Logiciel de système de gestion immobilière
• L'inscription Bitcoin va-t-elle disparaître ?
• débogage node.js
• Introduction à la signification d'un mot de passe invalide
• Comment annuler le renouvellement automatique de Baidu Netdisk
• vue de clé sans fil

Recommandations populaires

• que signifie js
• Comment convertir une chaîne en tableau en js ?
• Comment actualiser la page en utilisant javascript
• Comment supprimer un élément dans le tableau js
• Comment utiliser la fonction sqrt

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1416663
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4257161
• 
  Tutoriel vidéo JAVA pour débutants

  2474726
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  503262
• 
  Tutoriel d'introduction PHP base zéro

  844015

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1416663 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2474726 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  503262 temps d'étude
• 
  Introduction rapide au développement web front-end

  215252 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  876586 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  6333 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  4957 temps d'étude
• 
  Aller au langage pratique GraphQL

  4161 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  632 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  21207 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

À propos de nous Clause de non-responsabilité Sitemap

Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！