Apprendre et perfectionner comment effectuer certaines tâches quotidiennes avec Angular peut booster votre carrière assez rapidement, surtout si vous êtes nouveau dans le monde . Dans cet article, nous discuterons d'une de ces tâches qu'un développeur doit avoir effectuée des milliers de fois: créer une humble liste déroulante. Les sujets suivants seront traités dans ce blog:
- Qu'est-ce que Angular?
- Qu'est-ce qu'une liste déroulante?
- Création d'une liste déroulante à l'aide de Angular.
Qu'est-ce que Angular?
Eh bien, si vous lisez un blog sur la création d'une liste déroulante à l'aide d'Angular, on peut supposer que vous avez déjà une idée générale d'Angular. Pour ceux d'entre vous qui ne sont pas tombés sur ce blog en raison des caprices et des fantaisies d'Internet, est un cadre de développement frontal. Il est développé et maintenu par le géant de la technologie, Google. Il fournit un moyen modulaire de développer des applications Web d'une seule page comme Gmail, PayPal et Lego. Les applications créées à l'aide d'Angular implémentent l'approche Model-View-View-Model.
Qu'est-ce qu'une liste déroulante?
Une liste déroulante est une méthode propre pour afficher un tableau d'options car un seul choix est affiché initialement jusqu'à ce que l'utilisateur active la liste déroulante. Pour ajouter une liste déroulante à une page Web, vous utiliseriez un sélectionner élément ou un élément de liste . La première balise de l'élément select doit avoir l'option sélectionnée définie sur la valeur de selected. Voici un petit extrait de code pour vous montrer ce que je veux dire.
Option 1 Option 2 Option 3
Bien sûr, le code ci-dessus aurait besoin de son javascript spécifique pour avoir le comportement attendu, mais le squelette de base d'un menu déroulant reste le même. Voyons maintenant comment nous procédons dans Angular.
récursion fibonacci c ++
Liste déroulante utilisant Angular
Honnêtement, il serait plutôt intimidant de démontrer toutes les manières possibles d'implémenter une liste déroulante en angulaire. Le cerveau de chaque développeur gère la logique à sa manière et j'ai vu des menus déroulants fous dans ma carrière. Je vais être humble et vous montrer une approche de menu déroulant plutôt basique.
Méthode 1: Créer une liste déroulante à l'aide de ng-options
Vous pouvez utiliser les ng-options pour créer un menu déroulant à partir d'un tableau ou d'une liste d'éléments.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Méthode 2: Créer une liste déroulante à l'aide de ng-repeat
Angular étant un polyvalent , a évidemment plusieurs façons de créer un menu déroulant de base. La directive ng-repeat répète un bloc de code HTML pour chaque élément d'un tableau, elle peut être utilisée pour créer des options dans une liste déroulante, mais la directive ng-options a été spécialement conçue pour remplir une liste déroulante avec des options et en a une importante avantage c'est-à-dire que les menus déroulants faits avec ng-options permettent à la valeur sélectionnée d'être un objet, tandis que les listes déroulantes faites à partir de ng-repeat doivent être une chaîne.
est kotlin meilleur que java
Cet extrait de code particulier implémente la même liste en utilisant ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Cela nous amène à la fin de ce blog plutôt court «liste déroulante utilisant angular». J'espère que vous avez maintenant une idée de la façon dont vous pourriez implémenter un menu déroulant dans votre propre projet. Si vous avez des doutes concernant ce blog, vous pouvez les publier en commentaire dans la section commentaires ci-dessous. Vous pouvez également partager votre propre manière créative de créer une liste déroulante.
Si vous souhaitez en savoir plus sur le framework Angular, consultez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous aidera à comprendre Angular en profondeur et vous aidera à maîtriser le sujet.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de 'Angular Dropdown' et je vous répondrai.