Como criar um Filtro customizado com AngularJS v1.0
Há alguns dias atrás precisei de criar um filtro para truncar um texto mediante um número de caracteres e com um "final" customizado, por exemplo: "Este é um exempl...", ou seja ao fim de x caracteres ele substitui o resto do texto por "...".
Antes de continuar, quero apenas referir que o AngularJS está já na versão 1.0. Sendo que esta nova versão ainda não está totalmente documentada.
A criação de filtros customizavéis é simples, só é necessário três coisas:
- Criar o módulo
- Criar o respectivo filtro e a sua função
- Registar o modulo na aplicação
1. Criar o módulo
angular.module('yourModuleName', [])
2. Criar o respectivo Filtro e a sua função
angular.module('yourModuleName', [])'
.filter('yourFilterName', function () {'
return function () {'
return;'
};'
});'
3. Registar na aplicação
angular.module('yourAppName', ['yourModuleName']);
Exemplo: Truncate Filter
angular.module('filters', []).
filter('truncate', function () {
return function (text, length, end) {
if (isNaN(length))
length = 10;
if (end === undefined)
end = "...";
if (text.length <= length || text.length - end.length <= length) {
return text;
}
else {
return String(text).substring(0, length-end.length) + end;
}
};
});
Pode ver este exemplo neste gist e experimentar neste jsfiddle.
Nota: Esta pode não ser a melhor prática para criar filtros customizáveis, mas foi o resultado que eu alcancei e resolveu o meu problema.