Bueno comencemos con ng-repeat. Esta directiva se escribe de la siguiente manera
ng-repeat="elemento in lista"
Esta directiva se coloca dentro de un tag y el tag y su contenido se repetirán tantas veces como elementos haya en la lista. Vamos con un ejemplo.
Bien, como se puede observar en el resultado, el div en el que coloque la directiva ng-repeat junto con todo su contenido se ha repetido por cada elemento en la lista. Lo mejor de todo esto es que si editamos la lista, se reflejará el cambio en tiempo real sobre la página. Le voy a dar un poco mas de funcionalidad al ejemplo anterior para que se pueda ver claramente.
Voy a a explicar un poco el código, en el HTML agregué 3 input para nombre, edad y nacionalidad, cada uno con su correspondiente ng-model. También un agregue 2 botones uno para agregar una nueva persona y otra para eliminarla, y cada uno llamando a su función correspondiente dentro de la directiva ng-click. Como se puede ver en el resultado el botón de Eliminar Persona aparece tantas veces como elementos hay en el array de personas, como habrán notado le paso como parámetro $index. $index se usa para que el ng-repeat nos pase el numero de elemento de el array en el que se encuentra. De esta forma cuando se llama a llama a la función eliminarPersona() esta elimina a la persona correcta. Para esto uso el método splice, que remueve el elemento indicado de la lista.
Por ultimo la función agregarPersona() utiliza el método push para agregar un nuevo elemento en la lista.
Una de las cosas mas interesantes que podemos hacer con ng-repeat es ordenar y filtrar el listado. Se hace de la siguiente manera, si queremos ordenar la lista anterior por el nombre:
ng-repeat="persona in personas | orderBy:'Nombre'"
Si queremos que se ordene de forma invertida agregamos :true al final.
ng-repeat="persona in personas | orderBy:'Nombre':true"
Y para filtrar hacemos lo siguiente:
ng-repeat="persona in personas | filter:'filtro'"
También de pueden combinar para hacer las dos cosas:
ng-repeat="persona in personas | orderBy:'Nombre':true | filter:'filtro'"
Vamos a verlo en un ejemplo:
Bien como se puede ver ahora la lista puede ordenarse y filtrarse muy fácilmente.
Una cosa a notar en este ejemplo, si miran bien el select es que no tiene seleccionada una opción, por defecto nos figura una opción en blanco que al seleccionar alguna de las otras opciones desaparece, esto se debe a que estoy usando mal AngularJS. Cuando necesitemos usar un select debemos usar la directiva ng-options para agregar sus opciones.
El uso de ng-options es muy similar a ng-repeat. Agrego persona.nombre for para indicar que este campo es el que tiene que mostrase como opcion.
ng-options="persona.nombre for persona in personas"
También se puede agregar persona.nombre as para indicar que este valor sera el que se use para el ng-model
ng-options="persona.nombre as persona.nombre for persona in personas"
Si queremos seleccionar un elemento desde el código solo debemos asignarle al ng-model del select el elemento que queremos que este seleccionado, de esta forma:
$scope.persona2 = $scope.personas[1];
Así seleccionaríamos a Pedro que es el segundo elemento de la lista. Pero y si no sabemos que elemento es Pedro. En este caso debemos agregar track by persona.nombre para que asocie ese vamor con la opcion y de esta forma podemos seleccionar esa opcion asignando un elemento de mismo valor.
ng-options="persona.nombre as persona.nombre for persona in personas track by persona.nombre"
Por ultimo un dato mas, ng-options no funciona correctamente cuando hacemos el submit de un form, como habrán notado no se recibe ningún valor, esto es por que angular esta echo para trabajar con AJAX o similar. Pero bien acá tengo un pequeño truco para que reciban los que hay en el form. Lo único que tienen que hacer es agregar un input oculto con el valor del select de esta forma recibirán el valor del input en vez del select
<select ng-model="persona1" ng-options="persona.nombre as persona.nombre for persona in personas"></select>
<input type="text" name="persona" ng-model="persona1" style="display:none;" />
