Latest web development tutorials

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

<Div ng-app = "myApp " ng-controller = "myCtrl">

<Seleccionar ng-modelo = "nombreElegido " NG-options = "x para x en nombres">
</ Select>

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ ámbito de aplicación) {
$ Scope.names = [ "Google", "w3big", "Taobao"];
});
</ Script>

Trate »

ng-ng y opciones de repetición

También podemos usar la directivang-repetición para crear una lista desplegable:

Ejemplos

<Seleccionar>
<Opción ng-repeat = "x en los nombres"> {{x}} </ option>
</ Select>

Trate »

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:

<Seleccionar ng-modelo = "selectedSite ">
<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:

<Seleccionar ng-modelo = "selectedSite " NG-options = "x.site para x en sitios">
</ 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):

<Seleccionar ng-modelo = "selectedSite " NG-options = "x de (x, y) en los sitios">
</ 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:

$ Scope.cars = {
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

<Seleccionar ng-modelo = "selectedCar " NG-options = "y.brand para (x, y) en los coches">
</ Select>

Trate »