¡Esta es una revisión vieja del documento!
En la primera unidad ya vimos como usar el tag <select>
mediante la directiva ng-model
. Lo que vamos a ver ahora es como rellenar todas sus opciones automáticamente a partir de los datos del $scope
. Es algo parecido al tag ng-repeat
que acabamos de ver y para ello se utiliza la directiva ng-options
Antes de aplicar la directiva deberemos tener una variable en nuestro $scope
con el array de datos a mostrar en el <select>
.
app.controller("PruebaController", function($scope) { $scope.provincias=[ { idProvincia:2, nombre:"Castellón" }, { idProvincia:3, nombre:"Alicante" }, { idProvincia:1, nombre:"Valencia" }, { idProvincia:7, nombre:"Teruel" }, { idProvincia:5, nombre:"Tarragona" } ]; $scope.miProvinciaSeleccionada=null });
provincias
con el array de provincias a mostrar en el tag <select>
.miProvinciaSeleccionada
asociada al <select>
mediante ng-model
y que es donde se guardará el valor seleccionado en el <select>
. Los más importante es que contendrá el objeto correspondiente a la provincia que se ha seleccionado y no solo su idProvincia
.
Ahora que ya tenemos el modelo, pasemos a ver como usar la directiva ng-options
.La forma es un poco compleja:
”valor as etiqueta for item in items track by claveunica”
Siendo:
$scope
que contiene el array de elementos a mostrar en el <select>
.<select>
. Es nuestro caso será el objeto entero.<option>
.En nuestro ejemplo quedará de la siguiente forma:
<select ng-model="miProvinciaSeleccionada" ng-options="provincia as provincia.nombre for provincia in provincias track by provincia.idProvincia" > <option value="">--Elige opcion--</option> </select>
provincias
. provincia
.<option>
es provincia.nombre
.provincia
del ng-model
es la propia variable provincia
de cada uno de los elementos.provincia.idProvincia
Otra forma de ver como funciona la directiva ng-options
:
”provincia as provincia.nombre for provincia in provincias”
sería con el siguiente pseudocódigo en Java:
for(Provincia provincia:provincias) { valor=provincia; etiqueta=provincia.nombre; }
<select>
no lo hemos asociado a un simple valor numérico como idProvincia
sino un el objeto completo provincia
.
Aunque nada impide asociarlo al idProvincia
. Habría que modificar la directiva de la siguiente forma:
“provincia.idProvincia as provincia.nombre for provincia in provincias”
<option>
para el caso del valor ''null'. Es recomendable añadir esta opción, ya que sino lo hará automáticamente AngularJS pero al seleccionar una provincia desaparecerá la opción vacía, lo que hace que sea muy extraño para el usuario.