Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-06-02 17:31:54
Original
2373 Leute haben es durchsucht

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];
Nach dem Login kopieren

Seitenelement

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

Standardwert festlegen

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

$scope.item = 2016;
$scope.years = [2014, 2015, 2016];
Nach dem Login kopieren

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"}
];
Nach dem Login kopieren

Seitenelemente

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

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"}
];
Nach dem Login kopieren

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"}
};
Nach dem Login kopieren

Seitenelemente

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

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"}
};
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage