AngularJS Select (cuadro de selección)
AngularJS puede usar matrices u objetos para crear una opción de lista desplegable.
Use Ng-Opciones para crear un cuadro de selección
En AngularJS, podemos usar la Directiva NG-option para crear una lista desplegable, y los elementos de la lista son bucle de salida a través de objetos y matrices, como se muestra en el siguiente ejemplo:
Ejemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> 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> Este ejemplo demuestra el uso de la Directiva Ng-Opciones. </p> </body> </html>Resultados de ejecución:
Este ejemplo demuestra el uso de la Directiva Ng-Opciones.
Ng-opciones y repetición de ng
También podemos usar la Directiva NG-Repeat para crear una lista desplegable:
Ejemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-controller="myCtrl"><select><option ng-repeat="x in names">{{x}}</option></select></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"];}); </script> <p> Este ejemplo demuestra utilizando la Directiva NG-Repeat para crear una lista desplegable. </p> </body> </html>Resultados de ejecución:
Este ejemplo demuestra usar la Directiva NG-Repeat para crear una lista desplegable.
La Directiva NG-Repeat utiliza un código HTML de matriz para hacer bucle para crear listas desplegables, pero la Directiva NG-Opciones es más adecuada para crear listas desplegables, y tiene las siguientes ventajas:
Un objeto que usa la opción NG-Options, Ng-Rpeat es una cadena.
¿Cuál debería ser mejor?
Supongamos que usamos el siguiente objeto:
$ scope.sites = [{sitio: "google", url: "http://www.google.com"}, {sitio: "ranoob", url: "http://www.runoob.com"}, {sitio: "taobao", url: "http://wwww.taoboo.com"}];Ng-Repeat tiene limitaciones, y el valor seleccionado es una cadena:
Ejemplo
Use Ng-Repeat:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "myctrl"> <p> Seleccione un sitio web: </p> <seleccione ng-model = "selectedSite"> <opción ng-repeat = "x en sitios" valor = "{{x.url}}"> {{x.site}} </ppection> </ectele> <H1> ha Chosen: {{selectedSite}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "Runoob", url : "http://www.runoob.com"}, {sitio: "taobao", url: "http://www.taobao.com"}];}); </script> <p> Este ejemplo demuestra el uso de la directiva ng-repeat para crear una lista desplegable, y el valor seleccionado es una cadena. </p> </body> </html>Efecto de ejecución:
Seleccione un sitio web:
Su elección es: http://www.google.com
Este ejemplo demuestra usar la Directiva NG-Repeat para crear una lista desplegable, con el valor seleccionado como una cadena.
Usando la Directiva NG-Options, el valor seleccionado es un objeto:
Ejemplo
Use Ng-Opciones:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-controller = "myctrl"> <p> Seleccione un sitio web: </p> <select ng-model = "selectedSite" ng-options = "x.site para x en sitios"> </elect> <h1> ha elegido: {{selectedSite.Site}} </h1> <p> El url es: {{SelectedSite.Url}} </p> </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.sites = [{sitio: "google", url: "http://www.google.com"},}, {Sitio: ",", ", url:" url: ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "Sitio:" Sitio: "Sitio:" Sitio: "Sitio:" Site: "Site:" Site: "Site:" Sitio. "http://www.runoob.com"}, {sitio: "taobao", url: "http://www.taobao.com"}];}); </script> <p> Este ejemplo demuestra el uso de la directiva ng-options para crear una lista desplegable, y el valor seleccionado es un objeto. </p> </body> </html>Efecto de ejecución:
Seleccione un sitio web:
Elegiste: Google
La URL es: http://www.google.com
Este ejemplo demuestra el uso de la Directiva NG-Opciones para crear una lista desplegable, con el valor seleccionado como un objeto.
Al seleccionar un valor como objeto, podemos obtener más información y la aplicación es más flexible.
Fuente de datos como objeto
En el ejemplo anterior, utilizamos matrices como fuente de datos, y a continuación utilizamos objetos de datos como fuente de datos.
$ scope.sites = {Site01: "Google", Site02: "RUNOOB", Site03: "Taobao"};ng-options usa objetos que son muy diferentes, como sigue:
Ejemplo
Use un objeto como fuente de datos, x es la clave e y es el valor:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "myctrl"> <p> El sitio web que seleccionó es: </p> <select ng-model = "selectedSite" ng-options = "x for (x, y) en los sitios"> </section> <h1> El valor que seleccionó es: {{SelectedSite}}} </h1> </div> <p> Esta instancia demuestra el uso de objetos como una lista de dosis. </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.sites = {site01: "google", sitio02: "ranoob", sitio03: "taobao"};}); </scritch> </body> </html>Efecto de ejecución:
El sitio web seleccionado es:
El valor que seleccionó es: Google
Este ejemplo demuestra el uso de objetos como una lista desplegable Crear.
El valor que seleccionó es el valor en el par de valores clave.
El valor también puede ser un objeto en el par de valores clave:
Ejemplo
El valor seleccionado está en el valor del par de valores clave, que es un objeto:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "myctrl"> <p> Seleccione un automóvil: </p> <select ng-model = "selectedCar" ng-options = "x for (x, y) en los automóviles"> </elect> <h1> usted elige: {{selectedCar.brand}}} </h1> <h2> Modelo: {{SelectedCar.Model}} </h2> <h3> Color: {{SelectedCar.Color}} </h3> <p> Tenga en cuenta que el valor seleccionado es un objeto. </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", Model: "XC90", Color: "Black"}}}); </script> </body> </html>Resultados de ejecución:
Elige un coche
Tú eliges: Fiat
Modelo: 500
Color: blanco
Nota: El valor seleccionado es un objeto.
También puede usar la clave en el par de valores clave en lugar de usar el par de valores clave y usar las propiedades del objeto directamente:
Ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "myctrl"> <p> Seleccione un automóvil: </p> <select ng-model = "selectedCar" ng-options = "y.brand for (x, y) en los automóviles"> </elect> <p> ha elegido: {{selectedcar.brand}} </p> <p> El modelo es: {{SelectedCar.Model}} </p> <p> El color es: {{selectedCar.Color}} </p> <p> Las opciones en la lista desplegable también pueden ser atributos del objeto. </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", Model: "XC90", Color: "Black"}}}); </script> </body> </html>Resultados de ejecución:
Elija un coche:
Tu elección es: Ford
Modelo: Mustang
El color es: rojo
Las opciones en la lista desplegable también pueden ser atributos de objetos.
Lo anterior es una compilación de la información selecta AngularJS, y continuaremos agregándola más tarde. Espero que pueda ayudar a los amigos necesitados.