AngularJS auswählen (Feld auswählen)
AngularJs kann Arrays oder Objekte verwenden, um eine Dropdown-Liste zu erstellen.
Verwenden Sie NG-Options, um ein Auswahlfeld zu erstellen
In AngularJS können wir die NG-Option-Direktive verwenden, um eine Dropdown-Liste zu erstellen, und die Listenelemente werden über Objekte und Arrays ausgegeben, wie im folgenden Beispiel gezeigt:
Beispiel
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller="myCtrl"><select ng-model="selectedName" ng-options="x for x in names"></select></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"];}); </script> <p> Dieses Beispiel zeigt die Verwendung der NG-Options-Anweisung. </p> </body> </html>Auslaufergebnisse:
In diesem Beispiel wird die Verwendung der NG-Options-Richtlinie demonstriert.
NG-Optionen und NG-Wiederholungen
Wir können auch die NG-Repeat-Anweisung verwenden, um eine Dropdown-Liste zu erstellen:
Beispiel
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <select> <option ng-repeat = "x in Namen"> {{x}} </option> </select> </div> <script> var app = angular.module ('myapp', []); "Taobao"];}); </script> <p> Dieses Beispiel zeigt die Verwendung der NG-Repeat-Anweisung, um eine Dropdown-Liste zu erstellen. </p> </body> </html>Auslaufergebnisse:
Dieses Beispiel zeigt die Verwendung der NG-Repeat-Direktive, um eine Dropdown-Liste zu erstellen.
Die NG-Repeat-Anweisung verwendet ein Array, um HTML-Code zum Erstellen von Dropdown-Listen zu erstellen. Die NG-Options-Anweisung eignet sich jedoch besser zum Erstellen von Dropdown-Listen und hat die folgenden Vorteile:
Ein Objekt, das die NG-Options-Option verwendet, ist eine String-Repeat.
Welches sollte besser sein?
Angenommen, wir verwenden das folgende Objekt:
$ scope.sites = [{seiten: "google", url: "http://www.google.com"}, {seiten: "runoob", url: "http://www.runoob.com"}, {Site: "taobao", url: http://wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww.NG-Repeat hat Einschränkungen, und der ausgewählte Wert ist eine Zeichenfolge:
Beispiel
Verwenden Sie die NG-Wiederholung:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> Wählen Sie eine Website aus: </p> <select ng-model = "selectedSite"> <option ng-repeat = "x in sites" value = "{{{x.url}}}" oder "http://www.runoob.com"}, {Site: "Taobao", url: "http://www.taobao.com"}];}); </p> </body> </html>Laufeffekt:
Wählen Sie eine Website aus:
Ihre Wahl ist: http://www.google.com
In diesem Beispiel wird die Verwendung der NG-Repeat-Anweisung gezeigt, um eine Dropdown-Liste zu erstellen, wobei der ausgewählte Wert eine Zeichenfolge ist.
Unter Verwendung der NG-Options-Anweisung ist der ausgewählte Wert ein Objekt:
Beispiel
Verwenden Sie NG-Optionen:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> Wählen Sie eine Website aus: </p> <select ng-model = "selectedSite" ng-options = "X.Site für x in sites"> </select> <h1> Sie haben ausgewählt: {{SelectedSite.sit}} oder : "http://www.runoob.com"}, {Site: "Taobao", url: "http://www.taobao.com"}];}); </p> </body> </html>Laufeffekt:
Wählen Sie eine Website aus:
Sie haben sich entschieden: Google
Die URL ist: http://www.google.com
In diesem Beispiel wird die NG-Options-Direktive verwendet, um eine Dropdown-Liste zu erstellen, wobei der ausgewählte Wert ein Objekt ist.
Bei der Auswahl eines Wertes als Objekt können wir weitere Informationen erhalten und die Anwendung flexibler ist.
Datenquelle als Objekt
Im vorherigen Beispiel verwendeten wir Arrays als Datenquelle und im Folgenden Datenobjekte als Datenquelle.
$ scope.sites = {site01: "Google", Site02: "Runoob", Site03: "Taobao"};NG-Options verwendet Objekte, die sehr unterschiedlich sind, wie folgt:
Beispiel
Verwenden Sie ein Objekt als Datenquelle, x ist der Schlüssel und y ist der Wert:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> Die von Ihnen ausgewählte Website lautet: </p> <select ng-model = "selectedSite" ng-options = "x für (x, y) In Sites"> </select> <h1> Der Wert, den Sie ausgewählt haben, ist: {{{{{{{{{ausgewählte. </p> <script> var app = angular.module ('MyApp', []); app.controller ('myctrl', function ($ scope) {$ scope.sites = {site 01: "google", site02: "runoob", Site03: "taobao};Laufeffekt:
Die ausgewählte Website lautet:
Der von Ihnen ausgewählte Wert ist: Google
In diesem Beispiel zeigt die Verwendung von Objekten als Dropdown-Liste erstellen.
Der von Ihnen ausgewählte Wert ist der Wert im Schlüsselwertpaar.
Wert kann auch ein Objekt im Schlüsselwertpaar sein:
Beispiel
Der ausgewählte Wert befindet sich im Wert des Schlüsselwertpaares, das ein Objekt ist:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> Wählen Sie ein Auto aus: </p> <select ng-model = "selectedCar" ng-options = "x für (x, y) in cars"> </select> <h1> Sie wählen: {{SelectedCar.Brand}}}} </H1> <h2> Modell: {{{selectedCar.model}} </h2> <h3> Farbe: {{selectedCar.color}} </h3> <p> Beachten Sie, dass der ausgewählte Wert ein Objekt ist. </p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.cars = { car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, CAR03: {Brand: "Volvo", Modell: "xc90", Farbe: "Black"}}}); </script> </body> </html>Auslaufergebnisse:
Wählen Sie ein Auto
Sie wählen: Fiat
Modell: 500
Farbe: Weiß
Hinweis: Der ausgewählte Wert ist ein Objekt.
Sie können den Schlüssel auch im Schlüsselwertpaar verwenden, anstatt das Schlüsselwertpaar zu verwenden, und die Eigenschaften des Objekts direkt verwenden:
Beispiel:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> Wählen Sie ein Auto aus: </p> <select ng-model = "selectedCar" ng-options = "y.brand für (x, y) in cars"> </select> <p> Sie haben ausgewählt: {{SelectedCar.brand}}} </p> <p> Modell ist: {{SelectedCar.brand}}}} </p> <p> Modell ist: {{{selectedCar.model}} </p> <p> Die Farbe ist: {{selectedCar.color}} </p> <p> Die Optionen in der Dropdown-Liste können auch Attribute des Objekts sein. </p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.cars = { car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, CAR03: {Brand: "Volvo", Modell: "xc90", Farbe: "Black"}}}); </script> </body> </html>Auslaufergebnisse:
Wählen Sie ein Auto:
Ihre Wahl ist: Ford
Modell: Mustang
Farbe ist: rot
Optionen in der Dropdown-Liste können auch Attribute von Objekten sein.
Das obige ist eine Zusammenstellung von AngularJS -Auswahlinformationen, und wir werden sie später weiter hinzufügen. Ich hoffe, es kann Freunden in Not helfen.