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?
Wenn 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?
Ein 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.