AngularJS Seleccionar (casilla de verificación)
AngularJS pueden crear una lista desplegable de opciones para utilizar una matriz u objeto.
Crear un cuadro de selección a través de NG-opciones
En AngularJS podemos usar elcomando-ng opción para crear una lista desplegable, elementos de lista a través de objetos y matrices de ciclo de la salida, los siguientes ejemplos:
Ejemplos
<Seleccionar ng-modelo = "nombreElegido " NG-options = "x para x en nombres">
</ Select>
</ Div>
<Script>
app.controller ( 'myCtrl', function ( $ ámbito de aplicación) {
$ Scope.names = [ "Google", "w3big", "Taobao"];
});
Trate »
ng-ng y opciones de repetición
También podemos usar la directivang-repetición para crear una lista desplegable:
ng instrucción de repeticiónes colocar a través de la matriz de código HTML para crear la lista desplegable, peroNG-opciones decomando más adecuado para la creación de la lista desplegable, tiene las siguientes ventajas:
Un objeto utilizandolas opciones de NG-Opciones,ng-repetición es una cadena.
Se debe utilizar que es mejor?
Supongamos que utilizamos los siguientes objetos:
$scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "w3big", url : "http://www.w3big.com"}, {site : "Taobao", url : "http://www.taobao.com"} ];
ng-repetición tiene sus limitaciones, el valor elegido es una cadena:
Ejemplos
Usong-repeat:
<Opción ng-repeat = "x valor en sitios" = "{{}} x.url"> {{}} x.site </ option>
</ Select>
<H1> Su elección es: {{selectedSite}} </ h1>
Trate »
Uso de comandosNG-opciones, seleccione el valor de un objeto:
Ejemplos
UtiliceNG-opciones:
</ Select>
<H1> Su elección es: {{selectedSite.site}} </ h1>
<P> URL es: {{selectedSite.url}} </ p>
Trate »
Cuando se selecciona el valor es un objeto, podemos obtener más información y aplicaciones más flexible.
objeto de origen de datos
ejemplo anterior se utiliza una matriz como una fuente de datos, tenemos los siguientes objetos de datos como fuente de datos.
$scope.sites = { site01 : "Google", site02 : "w3big", site03 : "Taobao" };
NG-opciones utilizando objetos son muy diferentes, como sigue:
Ejemplos
Utilizando el objeto como fuente de datos,x es la clave (key),y es un valor (valor):
</ Select>
<H1> valor que elija: {{}} selectedSite </ h1>
Trate »
Su elección es el valor de pares de valores teclados.
valor en los pares de valores de teclados también puede ser un objetivo:
Ejemplos
Seleccionar el valor en el valor de teclado del valor, que es que es un objeto:
CAR01: {marca: "Ford" , modelo "Mustang", color: "rojo"},
car02: {marca: "Fiat" , modelo "500", color: "blanco"},
car03: {marca: "Volvo" , modelo: "XC90", color: "negro"}
};
Trate »
No se podrán utilizar pares clave-valor clave, utilizar las propiedades de un objeto directamente en el menú desplegable:
Ejemplos
</ Select>
Trate »