Como criar um Filtro customizado com AngularJS v1.0

1 minute read

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:

  1. Criar o módulo
  2. Criar o respectivo filtro e a sua função
  3. 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.

Leave a Comment