AngularJS Select (caixa de seleção)

Anterior: AngularJS instrução ng de valor

AngularJS pode criar uma lista suspensa de opções para usar uma matriz ou objeto.

Criar uma caixa de seleção usando NG-opções

Em AngularJS podemos usar o comandong-opção para criar uma lista drop-down, itens de lista por meio de objetos e matrizes de ciclo da saída, seguindo exemplos:

Exemplos

var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ escopo) {
$ Scope.names = [ "Google", "w3big", "Taobao"];
});

</ Script>

tente »

ng-opções e ng-repeat

Podemos também usar directivang-repeat para criar uma lista drop-down:

Exemplos

tente »

instruçõesng-repeat é percorrer a matriz de código HTML para criar uma lista drop-down, mas NG-opções decomando mais adequado para a criação de lista drop-down, tem as seguintes vantagens:

Um objeto usando asopções de Opções NG,-repeaté uma string.

Ele deve ser usado que é melhor?

Suponha-se que usar os seguintes 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-repeat tem suas limitações, o valor escolhido é uma string:

Exemplos

Useng-repeat:

<Select ng-model = "selectedSite ">
<Opção ng-repeat = "x valor em locais" = "{{x.url}}"> {{x.site}} </ option>
</ Select>

<H1> Sua escolha é: {{selectedSite}} </ h1>

tente »

Use ocomando-opções ng, selecione o valor de um objeto:

Exemplos

UseNG-opções:

<Select ng-modelo = "selectedSite " NG-options = "x.site for x in sites">
</ Select>

<H1> Sua escolha é: {{selectedSite.site}} </ h1>
<P> URL é: {{selectedSite.url}} </ p>

tente »

Quando você seleciona o valor é um objeto, podemos obter mais informações e aplicações mais flexível.

objeto de fonte de dados

exemplo anterior, usamos uma matriz como uma fonte de dados, temos os seguintes objetos de dados como fonte de dados.

$scope.sites = {
    site01 : "Google",
    site02 : "w3big",
    site03 : "Taobao"
};

NG-opções usando objetos são muito diferentes, como segue:

Exemplos

Usando o objeto como fonte de dados,x é a chave (key),y é um valor (value):

<Select ng-modelo = "selectedSite " NG-options = "x para (x, y) em sítios">
</ Select>

<H1> valor que você escolher: {{selectedSite}} </ h1>

tente »

Sua escolha é o valor em pares de valores teclado.

valor nos pares de valores teclado pode também ser um alvo:

Exemplos

Seleccionar o valor no valor teclado do valor, o que é que ele é um objecto:

$ Scope.cars = {
CAR01: {marca: "Ford" , Modelo: "Mustang", cor: "vermelho"},
car02: {marca: "Fiat" , o modelo: "500", cor: "branco"},
car03: {marca: "Volvo" , modelo: "XC90", cor: "black"}
};

tente »

não podem ser utilizados pares -VALOR chave chave, use as propriedades de um objeto diretamente no menu drop-down: