Caixas de seleção do AngularJS
AngularJS permite criar listas suspensas com base em itens em uma matriz ou em um objeto.
Criando uma caixa de seleção usando ng-options
Se você deseja criar uma lista suspensa, baseada em um objeto ou array em AngularJS, você deve usar a ng-optionsdiretiva:
Exemplo
<div ng-app="myApp" 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 = ["Emil", "Tobias",
"Linus"];
});
</script>
de-opções vs de-repetição
Você também pode usar a ng-repeatdiretiva para fazer a mesma lista suspensa:
Exemplo
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Como a ng-repeatdiretiva repete um bloco de código HTML para cada item em uma matriz, ela pode ser usada para criar opções em uma lista suspensa, mas a ng-optionsdiretiva foi feita especialmente para preencher uma lista suspensa com opções.
O que eu uso?
Você pode usar a ng-repeatdiretiva e a ng-optionsdiretiva:
Suponha que você tenha uma matriz de objetos:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
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>
Ao usar o valor como um objeto, use em vez ng-valuede value:
Exemplo
Usando ng-repeatcomo objeto:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
Exemplo
Usando ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
Quando o valor selecionado é um objeto, ele pode conter mais informações e seu aplicativo pode ser mais flexível.
Usaremos a ng-optionsdiretiva neste tutorial.
A fonte de dados como um objeto
Nos exemplos anteriores a fonte de dados era um array, mas também podemos usar um objeto.
Suponha que você tenha um objeto com pares de valores-chave:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
A expressão no ng-optionsatributo é um pouco diferente para objetos:
Exemplo
Usando um objeto como fonte de dados, xrepresenta 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>
O valor selecionado sempre será o valor em um par chave- valor .
O valor em um par chave- valor também pode ser um objeto:
Exemplo
O valor selecionado ainda será o valor em um par chave- valor , 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"}
};
As opções na lista suspensa não precisam ser a chave em um par chave - valor, também pode ser o valor ou uma propriedade do objeto de valor:
Exemplo
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>