Filtros básicos más usados de AngularJS

AngularJS

En este post hablaré sobre algunos de los filtros básicos más usados de AngularJS. Lo mejor de todo es que si estos filtros no son lo que buscas, siempre puedes crear un propio o encontrar lo que necesitas en la comunidad de AngularJS.

Filtro de número

Este filtro permite ofrecer un valor más preciso, redondeando el número después del punto decimal.

Un ejemplo con el caso práctico del post anterior

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
  <script src="angular.min.js"></script>
  <script>
 
angular.module("filtros", []).controller("ejemploFiltro", function($scope) {
         var usuario = {
            nombre: 'EJEMPLO',
            correo: 'ejemplo@guidacode.com',
            fechaAlta: new Date(2017, 07, 12),
            puntuacion: 8.659855,
            slugPerfil: 'ejemplo-usuario'
        };
usuario.nombre = usuario.nombre.toLowerCase();
        $scope.data = usuario;
});
  </script>
</head>
<body ng-app="filtros" ng-controller="ejemploFiltro">
<h3>Puntuacion</h3>
<strong>Sin filtro</strong>: {{data.puntuacion}}<br/>
</body>
</html>

Al mostrar la puntuación con filtro, se han reducido los decimales redondeando. Si deseamos que el número se redondee pero teniendo un límite de números decimales, podemos hacerlo indicándole al filtro cuantos números queremos.

XHTML
1
<strong>Con filtro</strong>: {{data.puntuacion | number:2}}<br/>

Filtro de fecha

Este es otro de los filtros básicos que es indispensable, sobre todo cuando queremos mostrar una fecha de la base de datos que está en formato inglés.

Aunque ponga que es un filtro de fecha, también funciona con las horas.

Este filtro es muy flexible por la gran cantidad de parámetros que se pueden combinar ofreciendo una gran variedad de formatos de fechas y horas. Puedes ver todos los parámetros en la página oficial,

Voy a cambiar el contenido <body> para mostrar el uso de este filtro

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body ng-app="filtros" ng-controller="ejemploFiltro">
<h3>Filtro de fechas</h3>
<p>Fecha media y hora:<strong> {{ data.fechaAlta | date:'medium'}} </strong></p>
<p>Fecha media:<strong> {{ data.fechaAlta | date:'mediumDate'}} </strong></p>
<p>Fecha corta:<strong> {{ data.fechaAlta | date:'shortDate'}} </strong></p>
 
<p>Fecha formato español:<strong> {{ data.fechaAlta | date:'dd-MM-yyyy'}} </strong></p>
<p>El usuario se dio de alta el {{ data.fechaAlta | date:'MMMM'}} un {{          
data.fechaAlta | date:'EEEE'}} a las {{ data.fechaAlta | date:'ha'}}</p>
</body>

El filtro limitTo

Este filtro limita la cantidad de información mostrada desde un array, Para ello, crea un nuevo array que contiene un subconjunto de los elementos que tiene el array original.

Pongamos el supuesto de que en el JSON también se guardan las valoraciones que ha recibido un usuario.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var usuario = {
    nombre: 'EJEMPLO',
    correo: 'ejemplo@guidacode.com',
    fechaAlta: new Date(2017, 07, 12),
    puntuacion: 8.659855,
    slugPerfil: 'ejemplo-usuario',
    valoraciones:
        [9.45,
        10,
4.85,
7.65,
7.25,
5.45,
8]
};

Si quiero mostrar las últimas 4, empleo el filtro limiTo. Aunque en este ocasión es preciso emplear la directiva ng-repeat que es similar a un bucle foreach. De esta manera el elemento <li> se repetirá hasta 4 veces cada uno con una nota diferente.

XHTML
1
2
3
4
5
6
7
8
9
10
<body ng-app="filtros" ng-controller="ejemploFiltro">
<h3>Las últimas 4 valoraciones</h3>
<ul>
    <li ng-repeat="notas in data.valoraciones | limitTo:4">
        {{ notas | number:1}}
    </li>
</ul>
</body>

Lo mejor de todo, es que también podemos empezar por el otro lado si ponemos un número negativo en el filtro.

XHTML
1
<li ng-repeat="notas in data.valoraciones | limitTo:-2">

Y hasta aquí los filtros básicos de AngularJS. Espero que os sea de ayuda. A seguir picando 🙂