AngularJS SELECT (SELECT BOX)
AngularJS peut utiliser des tableaux ou des objets pour créer une option de liste déroulante.
Utilisez Ng-Options pour créer une boîte de sélection
Dans AngularJS, nous pouvons utiliser la directive NG-Option pour créer une liste déroulante, et les éléments de liste sont en boucle de sortie via des objets et des tableaux, comme indiqué dans l'exemple suivant:
Exemple
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MyCtrl"> <sélectionnez ng-model = "SelectedName" ng-options = "x pour x dans les noms"> </lect> </v> </ script> var app = angular.module ('myApp', []); app.Controller ('myctrl', fonction ($ Scope) {$ Scope.Names = ["Google", "Run" "Taobao"];}); </cript> <p> Cet exemple démontre l'utilisation de la directive Ng-Options. </p> </ body> </html>Résultats en cours:
Cet exemple démontre l'utilisation de la directive Ng-Options.
Ng-Options et Ng-Repeat
Nous pouvons également utiliser la directive NG-Repeat pour créer une liste déroulante:
Exemple
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MyCtrl"> <lelect> <Option ng-repeat = "x in noms"> {{x}} </opoption> </lect> </div> <cript> var app = angular.module ('myApp', []); App.Controller ('myctrl', function ($ Scope) {$ scope.names = [google "", fonction ($ Scope) {$ Scope "Taobao"];}); </cript> <p> Cet exemple démontre l'utilisation de la directive NG-Repeat pour créer une liste déroulante. </p> </ body> </html>Résultats en cours:
Cet exemple montre l'utilisation de la directive NG-Repeat pour créer une liste déroulante.
La directive NG-Repeat utilise un tableau pour faire bouger le code HTML pour créer des listes déroulantes, mais la directive Ng-Options est plus adaptée à la création de listes déroulantes, et il présente les avantages suivants:
Un objet utilisant l'option Ng-Options, Ng-Repeat est une chaîne.
Lequel devrait être le mieux?
Supposons que nous utilisons l'objet suivant:
$ scope.sites = [{site: "google", URL: "http://www.google.com"}, {site: "runoob", url: "http://www.runoob.com"}, {site: "taobao", url: "http://www.taobao.com"}];Ng-Repeat a des limitations, et la valeur sélectionnée est une chaîne:
Exemple
Utilisez Ng-Repeat:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MyCtrl"> <p> Sélectionnez un site Web: </p> <sélectionner ng-model = "selectSite"> <option ng-repeat = "x in sites" value = "{{x.url}}"> {{x.site}} </opoption> </lect> <h1> Vous avez choisi: {{selectedSite}} </h1> </div> <script> var app = angular.module ('myApp', []); app.Controller ('myctrl', function ($ Scope) {$ scope.sites = [{site: "google", url: "http://www.google.com"}, {site: "Run", Url: Url: Orlle: ". "http://www.runoob.com"}, {site: "Taobao", URL: "http://www.taobao.com"}];}); </cript> <p> Cet exemple démontre une chaîne NG-Repeat pour créer une liste déroulante, et la valeur sélectionnée est une chaîne. </p> </ body> </html>Effet de course:
Sélectionnez un site Web:
Votre choix est: http://www.google.com
Cet exemple démontre l'utilisation de la directive NG-Repeat pour créer une liste déroulante, la valeur sélectionnée étant une chaîne.
En utilisant la directive Ng-Options, la valeur sélectionnée est un objet:
Exemple
Utilisez des options NG:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MyCtrl"> <p> Sélectionnez un site Web: </p> <sélectionnez ng-model = "SelectedSite" ng-options = "x.site pour x dans les sites"> </ select> <h1> Vous avez choisi: {{selectedSite.Site}} </h1> <p> L'URL est: {{selectedSite.url}} </p> </div> <prissing> var app = angular.module ('myApp', []); app.Controller ('myctrl', function ($ scope) {$ scope.sites = [{site: "google", url: "http://www.google.com". "http://www.runoob.com"}, {site: "taobao", url: "http://www.taobao.com"}];}); </script> <p> Cet exemple démontre que l'utilisation de la directive Ng-Options pour créer une liste déroulante, et la valeur sélectionnée est un objet. </p> </ body> </html>Effet de course:
Sélectionnez un site Web:
Vous avez choisi: Google
L'URL est: http://www.google.com
Cet exemple démontre l'utilisation de la directive Ng-Options pour créer une liste déroulante, la valeur sélectionnée étant un objet.
Lors de la sélection d'une valeur en tant qu'objet, nous pouvons obtenir plus d'informations et l'application est plus flexible.
Source de données comme objet
Dans l'exemple précédent, nous avons utilisé des tableaux comme source de données, et ci-dessous, nous avons utilisé des objets de données comme source de données.
$ scope.sites = {site01: "google", site02: "runoob", site03: "taobao"};Ng-Options utilise des objets très différents, comme suit:
Exemple
Utilisez un objet comme source de données, x est la clé et y est la valeur:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MYCTRL"> <p> Le site Web que vous avez sélectionné est: </p> <sélectionner ng-model = "selectedSite" ng-options = "x for (x, y) dans les sites"> </lect> <h1> La valeur que vous avez sélectionnée est: {{selectedSite}} </h1> </v> <p> Cette instance démontre l'utilisation de l'objet comme une liste d'objets. </p> <cript> var app = angular.module ('myapp', []); app.Controller ('myctrl', fonction ($ scope) {$ scope.sites = {site01: "google", site02: "runoob", site03: "taobao"};});Effet de course:
Le site Web sélectionné est:
La valeur que vous avez sélectionnée est: Google
Cet exemple démontre l'utilisation d'objets comme liste déroulante Créer.
La valeur que vous avez sélectionnée est la valeur de la paire de valeurs clés.
La valeur peut également être un objet dans la paire de valeurs clés:
Exemple
La valeur sélectionnée est dans la valeur de la paire de valeurs clés, qui est un objet:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MyCtrl"> <p> Sélectionnez une voiture: </p> <sélectionner ng-model = "selectCar" ng-options = "x for (x, y) dans les voitures"> </lect> <h1> Vous choisissez: {{selectedcar.brand}}} </h1> <h2> Modèle: {{selectedCar.Model}} </h2> <h3> couleur: {{selectedcar.color}} </h3> <p> Notez que la valeur sélectionnée est un objet. </p> </div> <script> var app = angular.module ('myapp', []); app.Controller ('myctrl', fonction ($ scope) {$ scope.cars = {car01: {marque: "Ford", modèle: "Mustang", Color: "Red"}, car02: {marque: "Fiat", modèle: "500", ",", blanc: "Brand:" Fiat ", modèle:" 500 ",", ", White: Brand:" Fiat ", modèle:" 500 ",", ", White: Brand:" Fiat ", Mode car03: {marque: "Volvo", modèle: "xc90", couleur: "noir"}}); </cript> </ody> </html>Résultats en cours:
Choisissez une voiture
Vous choisissez: Fiat
Modèle: 500
Couleur: blanc
Remarque: la valeur sélectionnée est un objet.
Vous pouvez également utiliser la clé dans la paire de valeurs de clé au lieu d'utiliser la paire de valeurs de clé et d'utiliser directement les propriétés de l'objet:
Exemple:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MyCtrl"> <p> Sélectionnez une voiture: </p> <sélectionner ng-model = "SelectedCar" ng-options = "Y.brand for (x, y) dans les voitures"> </ select> <p> que le modèle est: {{selectedcar.brand}} </p> <p> Le modèle est: {{selectedCar.Model}} </p> <p> La couleur est: {{selectedCar.Color}} </p> <p> Les options de la liste déroulante peuvent également être des attributs de l'objet. </p> </div> <script> var app = angular.module ('myapp', []); app.Controller ('myctrl', fonction ($ scope) {$ scope.cars = {car01: {marque: "Ford", modèle: "Mustang", Color: "Red"}, car02: {marque: "Fiat", modèle: "500", ",", blanc: "Brand:" Fiat ", modèle:" 500 ",", ", White: Brand:" Fiat ", modèle:" 500 ",", ", White: Brand:" Fiat ", Mode car03: {marque: "Volvo", modèle: "xc90", couleur: "noir"}}); </cript> </ody> </html>Résultats en cours:
Choisissez une voiture:
Votre choix est: Ford
Modèle: Mustang
La couleur est: rouge
Les options dans la liste déroulante peuvent également être des attributs d'objets.
Ce qui précède est une compilation des informations de sélection AngularJS, et nous continuerons à l'ajouter plus tard. J'espère que cela peut aider les amis dans le besoin.