Cuadro desplegable de AngularJS

AngularJS le permite crear listas desplegables basadas en elementos de un array o objeto.

Crear un cuadro desplegable con ng-options

Si desea crear una lista desplegable basada en un objeto o un array en AngularJS, debe usar ng-options Instrucción:

Ejemplo

<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>

Pruebe usted mismo

ng-options con ng-repeat

También puede usar ng-repeat Para crear la misma lista desplegable con la instrucción:

Ejemplo

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

Pruebe usted mismo

Debido a ng-repeat La instrucción repite un fragmento de código HTML para cada elemento de un array, por lo tanto, se puede usar para crear opciones en listas desplegables, pero ng-options La instrucción está diseñada específicamente para llenar opciones en listas desplegables.

¿Cuál debe usar?

Puede usar ng-repeat Instrucción y ng-options Instrucción:

Supongamos que tiene un array de objetos:

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

Ejemplo

Usar ng-repeat：

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Usted seleccionó: {{selectedCar}}</h1>

Pruebe usted mismo

Al usar valores como objetos, usar ng-value por value：

Ejemplo

Reemplaza ng-repeat usado como objeto:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Usted seleccionó un {{selectedCar.color}} {{selectedCar.model}}</h1>

Pruebe usted mismo

Ejemplo

Usar ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Usted seleccionó: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>

Pruebe usted mismo

Cuando el valor seleccionado sea un objeto, puede contener más información y su aplicación puede ser más flexible.

Vamos a usar en este tutorial ng-options instrucción.

Como fuente de datos del objeto

En el ejemplo anterior, la fuente de datos es un array, pero también podemos usar un objeto.

Supongamos que tiene un objeto con pares clave-valor:

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

ng-options las expresiones de las propiedades para el objeto son ligeramente diferentes:

Ejemplo

Al usar un objeto como fuente de datos,x representa la clave,y representa el valor:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Usted seleccionó: {{selectedCar}}</h1>

Pruebe usted mismo

El valor seleccionado siempre será dentro del par clave-valorvalor.

dentro del par clave-valorvalortambién puede ser un objeto:

Ejemplo

El valor seleccionado seguirá siendo dentro del par clave-valorvaloresta vez es un objeto:

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

Pruebe usted mismo

Las opciones de la lista desplegable no deben ser pares clave-valorClavetambién puede ser un valor o una propiedad del objeto valor:

Ejemplo

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

Pruebe usted mismo