AngularJS Select (Kontrollkästchen)

AngularJS kann eine Dropdown-Liste mit Optionen erstellen ein Array oder ein Objekt zu verwenden.

Erstellen Sie eine Auswahlbox mit ng-Optionen

In AngularJS können wirng-Option Befehl zu dem Erstellen eines Dropdown-Listen, Listenelemente durch Objekte und Arrays Zyklus der Ausgabe folgenden Beispiele verwenden:

Beispiele

var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ scope) {
$ Scope.names = [ "Google", "w3big", "Taobao"];
});

</ Script>

Versuchen »

ng-Optionen und ng-repeat

Wir können auchng-Repeat - Richtlinie zu erstellen eine Dropdown-Liste verwenden:

Beispiele

Versuchen »

ng-Repeat - Anweisung ist durch die Anordnung von HTML - Code in einer Schleife Dropdown-Liste zu erstellen, aber ng-Befehl Optionenbesser geeignet für die Erstellung von Dropdown-Liste, hat es die folgenden Vorteile:

Ein Objekt mitng-Optionen Optionen,ng-Repeat ist eine Zeichenfolge.

Es sollte verwendet werden, was besser ist?

Angenommen, wir folgende Objekte verwenden:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "w3big", url : "http://www.w3big.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeat ihre Grenzen hat, ist der gewählte Wert ein String:

Beispiele

Verwendenng-repeat:

<Wählen Sie ng-Modell = "selectedSite ">
<Option ng-repeat = "x in Websites" value = "{{x.url}}"> {{x.site}} </ option>
</ Select>

<H1> Ihre Wahl ist: {{selectedSite}} </ h1>

Versuchen »

Verwendenng-Optionen Befehl, wählen Sie den Wert eines Objekts:

Beispiele

Verwendenng-Optionen:

<Wählen Sie ng-Modell = "selectedSite " ng-Optionen = "x.site für x in Websites">
</ Select>

<H1> Ihre Wahl ist: {{selectedSite.site}} </ h1>
<P> URL: {{selectedSite.url}} </ p>

Versuchen »

Wenn Sie den Wert wählen ein Objekt ist, können wir mehr Informationen und Anwendungen flexibler zu bekommen.

Datenquellenobjekt

Vorigen Beispiel verwenden wir ein Array als Datenquelle, haben wir die folgenden Datenobjekten als Datenquelle.

$scope.sites = {
    site01 : "Google",
    site02 : "w3big",
    site03 : "Taobao"
};

ng Optionen Objekte mit sehr unterschiedlich sind , wie folgt:

Beispiele

Mit dem Objekt als Datenquelle,x ist der Schlüssel (key),y ein Wert (Wert):

<Wählen Sie ng-Modell = "selectedSite " ng-Optionen = "x für (x, y) in Websites">
</ Select>

<H1> Wert , den Sie wählen: {{selectedSite}} </ h1>

Versuchen »

Ihre Wahl ist Wert in Key - Value - Paare.

Wert in den Key - Value - Paare können auch ein Ziel sein:

Beispiele

Wählen Sie den Wert in der Tastatur Wert des Wertes, der ist , dass es ein Objekt ist:

$ Scope.cars = {
car01: {Marke: "Ford" , Modell: "Mustang", Farbe: "Rot"},
car02: {Marke: "Fiat" , Modell: "500", Farbe: "weiß"},
car03: {Marke: "Volvo" , Modell: "XC90", Farbe: "black"}
};

Versuchen »

in der Drop-Down - Menü kann nicht Schlüssel -Wertes Paare Schlüssel verwendet werden, direkt auf die Eigenschaften eines Objekts verwenden: