Dropdown-Menü in AngularJS

1. Grundlegende HTML-Syntax eines Dropdown-Menüs in AngularJS
2. Verwenden Sie das Attribut ng-options, um ein Dropdown-Menü in AngularJS zu erstellen
3. Verwenden Sie das Attribut ng-repeat, um ein Dropdown-Menü in AngularJS zu erstellen
4. Unterschied zwischen den Attributen ng-options und ng-repeat in AngularJS
5. Schlussfolgerung

AngularJS ist ein JavaScript-Framework zum Erstellen von Webanwendungen. AngularJS bietet Datenbindung und Abhängigkeitsinjektion, wodurch die Notwendigkeit des manuellen Schreibens von Code reduziert wird.

Dieser Artikel zeigt Methoden zum Erstellen eines Dropdown-Menüs mit AngularJS. Lass uns anfangen.

Grundlegende HTML-Syntax eines Dropdown-Menüs in AngularJS

Bevor wir in das Thema eintauchen, wollen wir zunächst das Grundkonzept der Dropdown-Box in Angular verstehen.

Eine Dropdown-Liste ist eine Art Auswahlmenü, in dem der Benutzer ein Element aus einer Liste auswählen kann. Es wird auch als Kombinationsfeld oder Pulldown-Menü bezeichnet.

Hauptsächlich kann das Menü durch Klicken auf den Titel oder die Schaltfläche > geöffnet und geschlossen werden. Ein Auswahlelement oder ein Listenelement wird verwendet, um eine Dropdown-Box zu einer Website-Seite hinzuzufügen. Wir müssen die bevorzugte Option im ersten <option>-Tag auf den gewünschten Wert im ausgewählten Element setzen.

Werfen wir einen Blick auf die grundlegende HTML-Syntax.

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

Die obige Syntax ist ein Beispiel dafür, wie wir das Dropdown verwenden können. Bevor der Benutzer etwas auswählt, gibt der Platzhalterparameter an, welcher Text angezeigt werden soll.

Die Variable Cars bezieht sich auf eine Liste von Elementen, die in der Liste erscheinen sollen, und sie wird in Kombination mit der Eigenschaftsvariable verwendet, die angibt, welche Eigenschaft aus Ihren komplizierten JavaScript-Listenobjekten dem Benutzer angezeigt werden soll. Schließlich speichert das ausgewählte Attribut den angegebenen Wert auf der übergeordneten Steuerung.

In AngularJS sind das Attribut ng-options und das Attribut ng-repeat die beiden Methoden, die üblicherweise verwendet werden, um ein Dropdown-Menü zu erstellen.

Verwenden Sie das Attribut ng-options, um ein Dropdown-Menü in AngularJS zu erstellen

Eine ng-options-Direktive ist ein AngularJS-Konstrukt, das eine Dropdown-Liste mit ausgewählten Optionen erstellt. Diese Direktive sollte nur verwendet werden, wenn das select-Steuerelement Teil des Templates Ihrer Seite sein soll.

Das Attribut ng-options hat ein öffnendes und ein schließendes Tag und ein Array aus zwei oder mehr Objekten, die die Optionen für diese bestimmte Optionsgruppe darstellen.

Jedes Objekt besteht aus zwei Eigenschaften: Die erste ist der Text, der im Eingabefeld erscheint, und die zweite ist ein Objekt mit anderen Parametern, die steuern, wie sich diese Option verhält.

Das Beispiel für diese Direktive ist wie folgt.

<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>

Einschränkungen bei der Verwendung von ng-options zum Erstellen eines Dropdown-Menüs in AngularJS

Das Attribut ng-options ist eine hervorragende Direktive für dynamische Optionslisten in Angular. Das Attribut ng-options hilft bei der Anzeige einer Reihe von Optionen in einer Auswahlliste. Es hat jedoch einige Einschränkungen.

Eine der Einschränkungen besteht darin, dass ng-options nicht mit anderen Angular-Komponenten kompatibel sind, die die ng-repeat-Direktive verwenden. Wenn Sie ng-repeat mit einer anderen Komponente verwenden möchten, müssen Sie Ihren Code schreiben, um ein Element in Ihrer Liste zu generieren.

Diese Einschränkung kann die Wartung und das Verständnis Ihres Codes erschweren, wenn Sie nicht wissen, was unter der Haube vor sich geht.

Verwenden Sie das Attribut ng-repeat, um ein Dropdown-Menü in AngularJS zu erstellen

Mit einer ng-repeat-Direktive in AngularJS können Sie ein HTML-Element für jedes Objekt in der Sammlung, über die Sie iterieren, wiederholen.

Wir können die Direktive ng-repeat verwenden, um Listen von Elementen zu erstellen, um beispielsweise eine Dropdown-Liste zu füllen. Die Direktive ng-repeat durchläuft alle angegebenen Array- oder Objektelemente und erzeugt je nach verwendetem HTML-Attribut weitere DOM-Elemente für jedes gefundene Objekt.

Um mehr über das Dropdown-Menü in Angular zu erfahren, hier klicken.

Das Beispiel für diese Direktive ist unten angegeben.

<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>

Einschränkungen bei der Verwendung von ng-repeat zum Erstellen eines Dropdown-Menüs in AngularJS

• Beim Definieren der Elemente in der Liste kann nur eine Variable verwendet werden, und es muss sich um ein Array oder ein Objekt handeln. Das bedeutet, dass wir keine Elemente in einer Schleife dynamisch hinzufügen und entfernen können und wir keine anderen Daten an ng-repeat übergeben können.
• Ein Index wird automatisch von AngularJS generiert, was bedeutet, dass wir nicht kontrollieren, welche Zahlen generiert werden. Um diese Einschränkung zu umgehen, müssen Sie die Indexnummer jedes Mal manuell ändern, wenn ein neues Element zur Liste hinzugefügt oder daraus entfernt wird.

Unterschied zwischen den Attributen ng-options und ng-repeat in AngularJS

Die Direktive ng-options zeigt ein Auswahlfeld an, wenn die ausgewählte Option nicht verfügbar ist. Es erstellt eine Liste aller möglichen Werte.

Andererseits erstellt die Direktive ng-repeat ein Array aller möglichen Werte, die ausgewählt werden können.

Darüber hinaus können mit ng-options erstellte Dropdowns ein Objekt als ausgewählten Wert haben, während mit ng-repeat erstellte Dropdowns einen String als ausgewählten Wert haben müssen.

Klicken Sie hier, wenn Sie mehr über ng-options und ng-repeat erfahren möchten.

Schlussfolgerung

Dieser Artikel liefert uns viele Informationen zum Erstellen eines Dropdown-Menüs in AngularJS. Wir haben gelernt, ein Dropdown-Menü in AngularJS zu erstellen, zu implementieren und damit zu beginnen.

Klicken Sie hier, um den oben genannten Code zu überprüfen.