Wie erstelle ich eine Dropdown-Box mit Angular?

In diesem Blog erfahren Sie, wie Sie mithilfe des Angular-Frameworks ein einfaches Dropdown-Feld erstellen. Das Dropdown-Feld wird mit zwei eindeutigen Methoden erstellt.

Das Erlernen und Perfektionieren bestimmter alltäglicher Aufgaben mit Angular kann Ihre Karriere ziemlich schnell ankurbeln, insbesondere wenn Sie neu in der Branche sind . In diesem Artikel werden wir über eine solche Aufgabe diskutieren, die ein Entwickler tausende Male erledigt haben muss: das Erstellen einer bescheidenen Dropdown-Box. Die folgenden Themen werden in diesem Blog behandelt:

Zeichenfolge bis Datum in Java konvertieren

Was ist Angular?


Angular Logo - Angular MVC - edurekaWenn Sie in einem Blog lesen, wie Sie mit Angular ein Dropdown-Feld erstellen, können Sie davon ausgehen, dass Sie bereits eine allgemeine Vorstellung von Angular haben. Für diejenigen unter Ihnen, die aufgrund der Launen und Phantasien des Internets nicht auf diesen Blog gestoßen sind. ist ein Front-End-Entwicklungsframework. Es wird vom Technologieriesen Google entwickelt und gepflegt. Es bietet eine modulare Möglichkeit, einseitige Webanwendungen wie Google Mail, PayPal und Lego zu entwickeln. Mit Angular erstellte Anwendungen implementieren den Model-View-View-Model-Ansatz.



Was ist eine Dropdown-Box?

Bildergebnis für Dropdown-MenüsymbolEin Dropdown-Feld ist eine saubere Methode zum Anzeigen eines Optionsfelds, da zunächst nur eine Auswahl angezeigt wird, bis der Benutzer das Dropdown-Feld aktiviert. Um einer Webseite ein Dropdown-Feld hinzuzufügen, verwenden Sie a wählen Element oder a Listenpunkt . Für das erste Tag im Auswahlelement muss die ausgewählte Option auf den Wert von selected gesetzt sein. Hier ist ein kleiner Code-Ausschnitt, der Ihnen zeigt, was ich meine.

Option 1 Option 2 Option 3

Natürlich würde der obige Code sein spezifisches Javascript benötigen, um das erwartete Verhalten zu haben, aber das Grundgerüst eines Dropdown-Menüs bleibt dasselbe. Mal sehen, wie wir das jetzt in Angular machen.

Dropdown-Box mit Angular

Ehrlich gesagt wäre es ziemlich entmutigend, alle möglichen Möglichkeiten aufzuzeigen, um eine Dropdown-Box in einem Winkel zu implementieren. Das Gehirn jedes Entwicklers behandelt die Logik auf seine eigene Art und Weise, und ich habe in meiner Karriere einige verrückte Dropdown-Menüs gesehen. Ich werde demütig sein und euch einen ziemlich einfachen Dropdown-Menü-Ansatz zeigen.

Methode 1: Erstellen einer Dropdown-Liste mit ng-Optionen

Sie können die ng-Optionen verwenden um ein Dropdown-Menü aus einem Array oder einer Liste von Elementen zu erstellen.

var app = angle.module ('demo', []) app.controller ('myCtrl', Funktion ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})

Methode 2: Erstellen einer Dropdown-Liste mit ng-repeat

Winkel ist vielseitig hat offensichtlich mehrere Möglichkeiten, ein grundlegendes Dropdown-Menü zu erstellen. Die ng-repeat-Direktive wiederholt einen HTML-Codeblock für jedes Element in einem Array. Sie kann zum Erstellen von Optionen in einer Dropdown-Liste verwendet werden. Die ng-options-Direktive wurde jedoch speziell zum Füllen einer Dropdown-Liste mit Optionen erstellt und hat eine wichtige Vorteil: Dropdown-Menüs, die mit ng-options erstellt wurden, ermöglichen, dass der ausgewählte Wert ein Objekt ist, während Dropdowns aus ng-repeat eine Zeichenfolge sein müssen.

Dieses spezielle Code-Snippet implementiert dieselbe Liste mit ng-repeat

{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', Funktion ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})

Dies bringt uns zum Ende dieser eher kurzen Blog-Dropdown-Liste mit Winkel. Ich hoffe, Sie haben jetzt eine Vorstellung davon, wie Sie ein Dropdown-Menü in Ihrem eigenen Projekt implementieren können. Wenn Sie Zweifel an diesem Blog haben, können Sie diese als Kommentar im Kommentarbereich unten veröffentlichen. Sie können auch Ihre eigene kreative Art der Erstellung einer Dropdown-Box teilen.

Wenn Sie mehr über Angular Framework erfahren möchten, lesen Sie unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Dieses Training wird Ihnen helfen, Angular gründlich zu verstehen und das Thema zu beherrschen.

Fibonacci-Serienprogramm in Java

Hast du eine Frage an uns? Bitte erwähnen Sie es in den Kommentaren von 'Angular Dropdown' und ich werde mich bei Ihnen melden.