¡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>
.
function MiPageController($scope) { $scope.provincias = [{ idProvincia: 1, nombre: "Valencia" }, { idProvincia: 2, nombre: "Castellón" }, { idProvincia: 3, nombre: "Alicante" }]; $scope.provincia = null; }
Vemos en la línea 2 como hemos definido la variable provincias
con un array de las 3 provincias de la comunidad valenciana. Cada uno de los elementos del array es un objeto completo con todas las propiedades que sean necesarias.
En la línea 13 hemos definido la propiedad provincia
que asociaremos el <select>
mediante ng-model
y que es donde se guardará el valor seleccionado en el <select>
.
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”
Siendo:
$scope
que contiene el array de elementos a mostrar en el <select>
.<select>
.<option>
.En nuestro ejemplo quedará de la siguiente forma:
<select ng-model="provincia" ng-options="provincia as provincia.nombre for provincia in provincias"> <option value="">-- Elige Provincia --</option> </select>
provincias
. provincia
.<option>
es provincia.nombre
.provincia
del ng-model
es la propia variable provincia
de cada uno de los elementos.
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.