Comment créer des listes déroulantes dynamiques dans AngularJS à l'aide de ng-options ?

Travailler avec Select à l'aide des ng-options d'AngularJS

Dans AngularJS, la directive ng-options vous permet de générer dynamiquement éléments pour un basé sur un tableau ou une source de données objet. Il fournit un moyen simple de créer des listes déroulantes qui peuvent être liées à des variables de portée.

Génération d'options à partir d'un tableau

Pour générer des options à partir d'un tableau, utilisez la syntaxe suivante :

<select ng-model="selectedValue" ng-options="item.value as item.label for item in items">

où :

• selectedValue est la variable de modèle qui sera liée au sélectionné option
• items est le tableau contenant les données des options
• item.value est la valeur à utiliser pour l'attribut value de l'élément option
• item.label est le texte à afficher pour l'élément d'option

Exemple

Considérez l'AngularJS suivant contrôleur :

$scope.items = [
  {id: '000001', title: 'Chicago'},
  {id: '000002', title: 'New York'},
  {id: '000003', title: 'Washington'}
];

Pour afficher ces données sous forme de

avec des options correspondant aux valeurs de titre et d'identifiant de chaque élément, utilisez le code suivant :

<select ng-model="selectedItem" ng-options="item.id as item.title for item in items">

Sélection d'une option par défaut

Pour sélectionner une option spécifique par défaut, utilisez la directive ng-init :

<select ng-model="selectedItem" ng-init="selectedItem = items[1]" ng-options="item.id as item.title for item in items">

Personnalisation de l'option par défaut

En ajoutant une enfant au avec un attribut de valeur vide, vous pouvez créer une option personnalisée par défaut :

<select ng-model="selectedItem">
  <option value="">Select One</option>
  <option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>

Masquer l'option par défaut après la sélection

Pour masquer l'option personnalisée par défaut une fois une sélection effectuée, utilisez ng- cacher :

<select ng-model="selectedItem">
  <option value="" ng-hide="selectedItem">Select One</option>
  <option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>

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!

Array Object for select using Attribute default this

Déclaration：

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

Article précédent：Outils de couverture des tests : garantir la qualité et la fiabilité du codeArticle suivant：Outils de couverture des tests : garantir la qualité et la fiabilité du code

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript

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

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved