Esta directiva permite iterar una colección de datos, generar un template por cada elemento de la colección y pintarlo en la vista, cada template o plantilla recibe su propio ámbito ($scope).
Vemos en el siguiente ejemplo, como inicializamos una variable que contiene una colección de objetos y luego mediante la directiva ng-repeat iteramos la colección y pintamos una etiqueta “li” por cada elemento de la colección mostrando tanto el nombre como la edad de cada alumno:
<body>
<div ng-controller="miControlador">
<div ng-init="alumnos = [
{nombre:'Paul', edad:12},
{nombre:'Carlos', edad:13},
{nombre:'Jan', edad:14},
{nombre:'Ana', edad:15},
{nombre:'Victor', edad:16}
]">
<ul>
<li ng-repeat="alumno in alumnos">{{alumno.nombre}}: {{alumno.edad}} años</li>
</ul>
</div>
</div>
</body>
ngChange (ng-change)
Esta directiva detecta cualquier cambio que se produzca dentro de una etiqueta de entrada, sean inputs, checkbox, etc., la forma de usarla es la siguiente.
En el lado de la vista tenemos dos opciones a marcar, si esta a favor o en contra, lo cual incrementará o restará las votaciones según sea el caso, veamos:
<body>
<div ng-controller="miControlador">
<input type="checkbox" ng-model="total" ng-change="aFavor()"> A favor
<input type="checkbox" ng-model="total" ng-change="enContra()"> En contra
<h3>Total Votos: {{total}}</h3>
</div>
</body>
En el lado del controlador sería de la siguiente manera:
app.controller('miControlador', function($scope){
$scope.total = 0;
$scope.aFavor = function (){
$scope.total++;
};
$scope.enContra = function (){
$scope.total--;
};
});
ngShow (ng-show) | ngHide (ng-hide)
Estas directivas permiten mostrar y ocultar alguna parte de la vista según la condición que le asignemos. Como seguramente todos ya deben saber ngShow permite mostrar y ngHide permite ocultar, veamos un ejemplo sencillo de como trabajan estas dos directivas.
Tenemos dos opciones “mostrar” y “ocultar”, y el mensaje a mostrar, como vemos en el código tenemos los dos checkbox y los dos mensajes, uno de los mensajes con la directiva ng-show y la otra con ng-hide, lo que nos indica que en cuanto “dato1″ sea true (esté marcada) se mostrará en caso contrario se ocultará, de forma inversa en el segundo mensaje, donde en caso “dato2″ sea true se ocultará y en caso contrario se mostrará.
En primera instancia al estar ambos sin check, estarán en estado false, por lo cual el único mensaje que se mostrará es el segundo.
<body>
<div ng-controller="miControlador">
<input type="checkbox" ng-model="dato1"> Mostrar
<input type="checkbox" ng-model="dato2"> Ocultar
<h3 ng-show="dato1">@frontendlabs 1</h3>
<h3 ng-hide="dato2">@frontendlabs 2</h3>
</div>
</body>
ngBind (ng-bind)
Esta directiva cumple la misma funcionalidad que las llaves , sin embargo, ng-bind tiene una mejor performance en cuanto a tiempo. En el siguiente ejemplo vemos la forma de uso, y tanto como ng-bind muestran el texto que se ingresa en la caja de texto.
<body>
<div ng-controller="miControlador">
<input type="text" ng-model="nombre">
<span>{{nombre}}</span>
</div>
</body>
Existen muchas más directivas, las cuales podrán encontrar en la Documentación oficial de AngularJS
Directivas Propias
Pese a que en angular se han implementado todas las posibles directivas, siempre podremos optar a crear nuestra propia directiva y es por esto que en AngularJS nos facilitan esta tarea.
Este es un ejemplo simple para poder implementar nuestra directiva.
var app = angular.module('MiModulo',[]);
app.controller('MiControlador', function($scope){
$scope.cliente = {
nombre: 'Jhon',
direccion: 'Av. Jose pardo 481, Miraflores, Lima, Perú'
};
});
//Aquí creamos la directiva
app.directive('miCliente', function() {
return {
template: 'Nombre: {{cliente.nombre}} Dirección: {{cliente.direccion}}'
};
});
En la parte de la vista usaríamos nuestra directiva así:
<body>
<div ng-controller="MiControlador">
</div>
</body>
Otra forma de usar nuestra directiva sería usarlo como etiqueta.
Referencias
Enlaces externos
