Hola chicos, el tema pasado aprendimos a cómo crear nuestros módulos en AngularJs porque necesitábamos este tema para crear nuestros filtros en AngularJs. 

 

Por ejemplo  podemos mejorar el filtro limitTo (filtro especial de AngularJs). Ahora bien, vamos a lo más importante a crear nuestro filtro.

¡Creando filtros en Angular!

Para crearlo necesitamos declarar .filter y dentro de los paréntesis colocar el nombre del filtro y la función callback.

.filter('nombreFiltro', function(){
...
});
 

Cuando un filtro se llama, en realidad se manda llamar una segunda función, así que tenemos que añadir lo siguiente:

 .filter('nombreFiltro', function(){
    return function(){ 
...
    };
})
 

Ahora bien, en la segunda función podemos incluir argumentos adicionales; el primer argumento es la entrada o los datos que vamos a filtrar. Por ejemplo, en el siguiente filtro trabajaremos con datos (input) y el segundo argumento es para decirle al filtro a cuántos caracteres se debe limitar la cadena de datos que le vamos a pasar. 

.filter('cortarTexto', function(){
    return function(input, limit){
    };
})
 

Ahora bien, vamos a cortar el texto a 10 caracteres y después colocar tres guiones medios.

return (input.length > limit) ? input.substr(0, limit)+'---' : input;
 

Nuestro código final quedaría de la siguiente forma:
HTML

<!DOCTYPE html>
<html lang="en" ng-app="contactsMgr">
	<head>
		<meta charset="utf-8">
		<title>Contact Manager</title>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="js/controller.js"></script>
	</head>
	<body>
 
		{{'Lorem ipsum dolor sit amet' | cortarTexto:10}}
 
	</body>
</html>
 

FILTRO

angular.module('contactsMgr', [])
 
.filter('cortarTexto', function(){
  return function(input, limit){
    return (input.length > limit) ? input.substr(0, limit)+'---' : input;
  };
})
 

Así se ve en nuestro navegador:

filtro.png

Si te perdiste la publicación pasada aquí te dejo el enlace: Aprendiendo a crear módulos en AngularJs 

@telecristy.

¿Te gustó esta publicación? Márcala como favorita