AngularJS caixas de seleção

AngularJS permite criar listas suspensas com base em itens de uma matriz ou um objeto.

Criando uma Select Box Usando NG-opções

Se você deseja criar uma lista suspensa, com base em um objeto ou uma matriz em AngularJS, você deve usar o ng-option directiva:

Exemplo

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

Tente você mesmo "

NG-opções vs ng-repeat

Você também pode usar o ng-repeat directiva para fazer a mesma lista suspensa:

Exemplo

Tente você mesmo "

Porque o ng-repeat directiva repete um bloco de código HTML para cada item em uma matriz, ele pode ser usado para criar opções em uma lista suspensa, mas o ng-options directiva foi feito especialmente para o preenchimento de uma lista suspensa com opções, e tem pelo menos, uma vantagem importante:

Dropdowns feitos com ng-options permite que o valor selecionado para ser um objeto, enquanto menus suspensos feitos de ng-repeat tem que ser uma string.

O que eu uso?

Suponha que você tem uma matriz de objetos:

$scope.cars = [
    {model : "Ford Mustang", color : "red"},
    {model : "Fiat 500", color : "white"},
    {model : "Volvo XC90", color : "black"}
];

O ng-repeat directiva tem suas limitações, o valor selecionado deve ser uma string:

Exemplo

Usando ng-repeat :

<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>

<h1>You selected: {{selectedCar}}</h1>

Tente você mesmo "

Ao usar a ng-options directiva, o valor selecionado pode ser um objeto:

Exemplo

Usando ng-options :

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>

Tente você mesmo "

Quando o valor selecionado pode ser um objeto, ele pode armazenar mais informação, e sua aplicação pode ser mais flexível.

Usaremos o ng-options directiva neste tutorial.

A fonte de dados como um objeto

Nos exemplos anteriores a fonte de dados foi uma matriz, mas também podemos usar um objeto.

Suponha que você tem um objeto com pares de valores-chave:

$scope.cars = {
    car01 : "Ford",
    car02 : "Fiat",
    car03 : "Volvo"
};

A expressão no ng-options atributo é um pouco diferente para objetos:

Exemplo

Usando um objecto como a fonte de dados, x representa a chave, e y representa o valor:

<select ng-model="selectedCar" ng-options=" x for (x, y) in cars ">
</select>

<h1>You selected: {{selectedCar}}</h1>

Tente você mesmo "

O valor selecionado será sempre o valor em um par de valores teclado.

O valor em um par de valores teclado também pode ser um objeto:

Exemplo

O valor selecionado ainda será o valor em um par de valores teclado, só que desta vez é um objeto:

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

Tente você mesmo "

As opções na lista suspensa não tem a chave em um par -valor chave, ele também pode ser o valor, ou uma propriedade do objeto de valor: