Caixa de seleção AngularJS

O AngularJS permite criar listas deslizantes com base em itens de arrays ou objetos.

Criar caixa de seleção usando ng-options

Se você quiser criar uma lista deslizante com base em um objeto ou array no AngularJS, deve usar ng-options Instrução:

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>

Experimente Você Mesmo

ng-options com ng-repeat

Você também pode usar ng-repeat A instrução para criar a mesma lista deslizante:

Exemplo

<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

Experimente Você Mesmo

Devido a ng-repeat A instrução repete um bloco de código HTML para cada item do array, portanto, pode ser usada para criar opções em listas deslizantes, mas ng-options A instrução foi projetada especificamente para preencher opções de listas deslizantes.

Qual deve ser usado?

Você pode usar ng-repeat e instrução ng-options Instrução:

Suponha que você tenha um array de objetos:

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

Exemplo

Usar ng-repeat：

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Você selecionou: {{selectedCar}}</h1>

Experimente Você Mesmo

Quando usar o valor como objeto, usar ng-value por value：

Exemplo

Substitui ng-repeat Usado como objeto:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Você selecionou um {{selectedCar.color}} {{selectedCar.model}}</h1>

Experimente Você Mesmo

Exemplo

Usar ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Você selecionou: {{selectedCar.model}}</h1>
<p>Sua cor é: {{selectedCar.color}}</p>

Experimente Você Mesmo

Quando o valor selecionado for um objeto, ele pode conter mais informações e o seu aplicativo pode ser mais flexível.

Vamos usar no tutorial ng-options Instrução.

Como fonte de dados do objeto

No exemplo anterior, a fonte de dados era um array, mas também podemos usar um objeto.

Suponha que você tenha um objeto com pares de chave-valor:

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

ng-options A expressão da propriedade para o objeto é ligeiramente diferente:

Exemplo

Usar um objeto como fonte de dados,x Representa a chave,y Representa o valor:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Você selecionou: {{selectedCar}}</h1>

Experimente Você Mesmo

O valor selecionado sempre será dentro do par de chave-valorvalor.

dentro do par de chave-valorvalorTambém pode ser um objeto:

Exemplo

O valor selecionado continuará a ser dentro do par de chave-valorvalordesta 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"}
};

Experimente Você Mesmo

As opções da lista suspensa não precisam ser pares de chave-valorChavetambém pode ser um valor, ou uma propriedade do objeto de valor:

Exemplo

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

Experimente Você Mesmo