AngularJS le permite crear listas desplegables en base a los elementos de un array o un objeto.
Creación de un cuadro de selección Uso de NG-opciones
Si desea crear una lista desplegable, basado en un objeto o una matriz en AngularJS, se debe utilizar la ng-option Directiva:
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>
Inténtalo tú mismo " NG-ng vs opciones de repetición
También puede utilizar el ng-repeat directiva para realizar la misma lista desplegable:
Debido a que el ng-repeat Directiva repite un bloque de código HTML para cada elemento de una matriz, que puede ser utilizado para crear opciones en una lista desplegable, pero el ng-options directiva fue hecho especialmente para el llenado de una lista desplegable con opciones, y tiene al menos una ventaja importante:
Menús desplegables hechos con ng-options permite que el valor seleccionado para ser un objeto, mientras que los menús desplegables hechos de ng-repeat tiene que ser una cadena.
¿Qué puedo usar?
Suponga que tiene una matriz de objetos:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; El ng-repeat Directiva tiene sus limitaciones, el valor seleccionado debe ser una cadena:
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>
Inténtalo tú mismo " Cuando se utiliza el ng-options directiva, el valor seleccionado puede ser un objeto:
Ejemplo
El uso de 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>
Inténtalo tú mismo " Cuando el valor seleccionado puede ser un objeto, que puede contener más información y su aplicación puede ser más flexible.
Vamos a utilizar el ng-options directiva en este tutorial.
El origen de datos como un objeto
En los ejemplos anteriores, la fuente de datos era una matriz, pero también se puede utilizar un objeto.
Suponga que tiene un objeto con pares de valores clave:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}; La expresión en el ng-options atributo es un poco diferente de los objetos:
Ejemplo
El uso de un objeto como la fuente de datos, x representa la llave, y y representa el valor:
<select ng-model="selectedCar" ng-options=" x for (x, y) in cars ">
</select>
<h1>You selected: {{selectedCar}}</h1>
Inténtalo tú mismo " El valor seleccionado será siempre el valor en un par de valores teclado.
El valor en un par de valores teclado también puede ser un objeto:
Ejemplo
El valor seleccionado seguirá siendo el valor en un par de valores teclado, sólo que esta vez se trata de 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"}
};
Inténtalo tú mismo " Las opciones de la lista desplegable no tiene ser la clave en un par clave-valor, sino que 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>
Inténtalo tú mismo "