Cuadros de selección de AngularJS
AngularJS le permite crear listas desplegables basadas en elementos en una matriz o un objeto.
Crear un cuadro de selección usando ng-options
Si desea crear una lista desplegable, basada en un objeto o una matriz en AngularJS, debe usar la ng-optionsdirectiva:
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>
de opciones vs de repetición
También puede usar la ng-repeatdirectiva para hacer la misma lista desplegable:
Ejemplo
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Debido a que la ng-repeatdirectiva repite un bloque de código HTML para cada elemento de una matriz, se puede usar para crear opciones en una lista desplegable, pero la ng-optionsdirectiva se creó especialmente para llenar una lista desplegable con opciones.
¿Qué uso?
Puede usar tanto la ng-repeatdirectiva como la ng-optionsdirectiva:
Suponga que tiene una matriz de objetos:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Ejemplo
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>
Cuando use el valor como un objeto, use ng-valueen lugar de value:
Ejemplo
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>
Ejemplo
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>
Cuando el valor seleccionado es un objeto, puede contener más información y su aplicación puede ser más flexible.
Usaremos la ng-optionsdirectiva en este tutorial.
La fuente de datos como un objeto
En los ejemplos anteriores, la fuente de datos era una matriz, pero también podemos usar un objeto.
Suponga que tiene un objeto con pares clave-valor:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
La expresión en el ng-optionsatributo es un poco diferente para los objetos:
Ejemplo
Usando un objeto como fuente de datos, xrepresenta la clave y
y
representa el valor:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
El valor seleccionado siempre será el valor en un par clave- valor .
El valor en un par clave- valor también puede ser un objeto:
Ejemplo
El valor seleccionado seguirá siendo el valor en un par clave- valor , solo que esta 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"}
};
Las opciones en la lista desplegable no tienen que ser la clave en un par clave -valor, también puede ser el valor o una propiedad del objeto de valor:
Ejemplo
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>