Menu déroulant dans AngularJS

1. Syntaxe HTML de base d’un menu déroulant dans AngularJS
2. Utilisez l’attribut ng-options pour créer un menu déroulant dans AngularJS
3. Utiliser l’attribut ng-repeat pour créer un menu déroulant dans AngularJS
4. Différence entre les attributs ng-options et ng-repeat dans AngularJS
5. Conclusion

AngularJS est un framework JavaScript pour la création d’applications Web. AngularJS fournit une liaison de données et une injection de dépendances, ce qui réduit le besoin d’écriture manuelle de code.

Cet article montre des méthodes pour créer un menu déroulant avec AngularJS. Commençons.

Syntaxe HTML de base d’un menu déroulant dans AngularJS

Avant de plonger dans le sujet, comprenons d’abord le concept de base de la boîte déroulante dans Angular.

Une liste déroulante est un type de menu de sélection dans lequel l’utilisateur peut sélectionner un élément dans une liste. Il est également connu sous le nom de zone de liste déroulante ou de menu déroulant.

Principalement, le menu peut être ouvert et fermé en cliquant sur le titre ou sur le bouton >. Un élément de sélection ou un élément de liste est utilisé pour ajouter une liste déroulante à une page de site Web. Nous devons définir l’option préférée dans la première balise <option> à la valeur souhaitée dans l’élément sélectionné.

Examinons la syntaxe HTML de base.

<dropdown placeholder="Cars" list="Cars" selected="Black Car" property="Model"></dropdown>

La syntaxe ci-dessus est un exemple de la façon dont nous pouvons utiliser la liste déroulante. Avant que l’utilisateur ne sélectionne quoi que ce soit, le paramètre d’espace réservé spécifie le texte à afficher.

La variable Cars fait référence à une liste d’éléments que vous souhaitez voir apparaître dans la liste, et elle est utilisée en combinaison avec la variable de propriété, qui spécifie quelle propriété de vos objets de liste JavaScript compliqués doit être affichée à l’utilisateur. Enfin, l’attribut sélectionné enregistre la valeur spécifiée sur le contrôleur parent.

Dans AngularJS, l’attribut ng-options et l’attribut ng-repeat sont les deux méthodes couramment utilisées pour créer un menu déroulant.

Utilisez l’attribut ng-options pour créer un menu déroulant dans AngularJS

Une directive ng-options est une construction AngularJS qui crée une liste déroulante avec des options de sélection. Cette directive ne doit être utilisée que lorsque le contrôle select doit faire partie du modèle de votre page.

L’attribut ng-options a une balise d’ouverture et de fermeture et un tableau de deux ou plusieurs objets représentant les options pour ce groupe d’options particulier.

Chaque objet se compose de deux propriétés : la première est le texte qui apparaîtra dans le champ de saisie, et la seconde est un objet avec d’autres paramètres qui contrôlent le comportement de cette option.

L’exemple de cette directive est le suivant.

<div ng-app="demo" ng-controller="myCtrl">

<select ng-model="Options" ng-options="Names">

 </select>

   </div>  

  <script>

 var app = angular.module('demo', []);

 app.controller('myteam', function($scope) {

 $scope.names = ["Dan", "John", "Smith"];

 });

 </script>

Limitations de l’utilisation de ng-options pour créer un menu déroulant dans AngularJS

L’attribut ng-options est une excellente directive pour les listes d’options dynamiques dans Angular. L’attribut ng-options permet d’afficher un tableau d’options dans une liste de sélection. Cependant, il a certaines limites.

L’une des limitations est que les ng-options ne sont pas compatibles avec les autres composants Angular utilisant la directive ng-repeat. Si vous souhaitez utiliser ng-repeat avec un autre composant, vous devez écrire votre code pour générer un élément dans votre liste.

Cette limitation peut rendre votre code difficile à maintenir et à comprendre si vous ne savez pas ce qui se passe sous le capot.

Utiliser l’attribut ng-repeat pour créer un menu déroulant dans AngularJS

Une directive ng-repeat dans AngularJS vous permet de répéter un élément HTML pour chaque objet de la collection sur laquelle vous itérez.

Nous pouvons utiliser la directive ng-repeat pour créer des listes d’éléments, par exemple, pour remplir une liste déroulante. La directive ng-repeat parcourt tous les éléments de tableau ou d’objet spécifiés et crée plus d’éléments DOM pour chaque objet trouvé en fonction de l’attribut HTML utilisé.

Pour en savoir plus sur le menu déroulant dans Angular, cliquez ici.

L’exemple de cette directive est donné ci-dessous.

<div ng-app="Sample" ng-controller="Testing">
<select>

 <option ng-repeat="Name">{{name}}</option>

 </select>

 </div>

  <script>

 var app = angular.module('Sample', []);

 app.controller('Testing', function($scope) {

 $scope.names = ["Rockstar", "Dan", "Patrick", "Han", "Jordan","John"];

 });

 </script>

Limitations de l’utilisation de ng-repeat pour créer un menu déroulant dans AngularJS

• Une seule variable peut être utilisée lors de la définition des éléments de la liste, et il doit s’agir d’un tableau ou d’un objet. Cela signifie que nous ne pouvons pas ajouter et supprimer dynamiquement des éléments dans une boucle, et nous ne pouvons pas transmettre d’autres données dans ng-repeat.
• Un index est généré automatiquement par AngularJS, ce qui signifie que nous ne contrôlons pas les nombres générés. Pour surmonter cette limitation, vous devez modifier manuellement le numéro d’index chaque fois qu’un nouvel élément est ajouté ou supprimé de la liste.

Différence entre les attributs ng-options et ng-repeat dans AngularJS

La directive ng-options affiche une boîte de sélection si l’option sélectionnée n’est pas disponible. Il crée une liste de toutes les valeurs possibles.

D’autre part, la directive ng-repeat crée un tableau de toutes les valeurs possibles à choisir.

De plus, les listes déroulantes créées avec ng-options peuvent avoir un objet comme valeur sélectionnée, tandis que les listes déroulantes créées avec ng-repeat doivent avoir une chaîne comme valeur sélectionnée.

Cliquez ici si vous voulez en savoir plus sur ng-options et ng-repeat.

Conclusion

Cet article nous fournit de nombreuses informations sur la création d’un menu déroulant dans AngularJS. Nous avons appris à créer un menu déroulant dans AngularJS, à les implémenter et à commencer avec eux.

Cliquez ici pour vérifier le code mentionné ci-dessus.