Heim  >  Artikel  >  Web-Frontend  >  Wie verwende ich die Konfigurationsmethode „Select Assignment NG-Options“ in AngularJS?

Wie verwende ich die Konfigurationsmethode „Select Assignment NG-Options“ in AngularJS?

亚连
亚连Original
2018-06-02 17:31:542354Durchsuche

Jetzt werde ich Ihnen eine Konfigurationsmethode für AngularJS-Auswahlzuweisungen für NG-Optionen vorstellen, die einen guten Referenzwert hat und ich hoffe, dass sie für alle hilfreich ist.

Array-Modus

Die Daten sind ein Array

$scope.years = [2014, 2015, 2016];

Seitenelement

 <select ng-model="item" ng-options="item as y for y in years">
 </select>

Standardwert festlegen

Standardwert festlegen Bei Bedarf können Sie zunächst einen Parameter festlegen:

$scope.item = 2016;
$scope.years = [2014, 2015, 2016];

Objektarray-Modus

Die Daten sind ein Array von Objekten

$scope.sites = [
 {site : "baidu", url : "https://www.baidu.com"},
 {site : "163", url : "http://www.163.com"},
 {site : "sina", url : "http://www.sina.com"}
];

Seitenelemente

 <select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites">
 </select>

Standardwert festlegen

Wenn Sie die Standardoption festlegen müssen, können Sie zuerst einen Parameter festlegen:

$scope.site = "163";
$scope.sites = [
 {site : "baidu", url : "https://www.baidu.com"},
 {site : "163", url : "http://www.163.com"},
 {site : "sina", url : "http://www.sina.com"}
];

Key-Vules-Objektarray-Modus

Die Daten sind ein Objektarray

$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};

Seitenelemente

<select ng-model="myCar" ng-options="y.brand for (x, y) in cars">
</select>

Standardwert festlegen

Bei Bedarf können Sie für die Standardoption zunächst einen Parameter festlegen:

$scope.site = "BYD";
$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};

angularjs ng-options offizielle API

Array-Typ:

label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr

Objekttyp:

label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in ob

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Grundsätze und Implementierungsmethoden für die gemeinsame Nutzung von Ressourcen für übergeordnete NodeJS-Prozesse und untergeordnete Prozesse

Vue-Axios-Formularübermittlungs-Upload Beispiele für Bilder

Beispielcode zum Hochladen von Bildern und Dateien in Vue

Das obige ist der detaillierte Inhalt vonWie verwende ich die Konfigurationsmethode „Select Assignment NG-Options“ in AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn