How to create multiple custom filters within a single module in Angularjs

Question

I'm following this tutorial and created the underneath custom filters accordingly. The last one however causes the first one to disappear; when you use the truncate filter it an exception. How do you create multiple filters within a module?

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;
        }

    };
});


angular.module('filters', []).filter('escape', function () {
    return function(text) {
      encodeURIComponent(text);  
    };
});

geniuscarrier · Accepted Answer · 2013-10-01 04:25:16Z

18

angular.module('filters', []).filter("truncate", function() {})
                             .filter("escape", function() {});

answered Oct 1, 2013 at 4:25

geniuscarrier

4,2492 gold badges24 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Polhill Over a year ago

How would you do the same but with a separate file for each filter?

Andy Polhill Over a year ago

Sorry for answering my own question, I guess it would be: angular.module('filters', []) angular.module('filters').filter("truncate", function() {}); angular.module('filters').filter("escape", function() {});

Chandermani · Accepted Answer · 2013-10-01 04:25:09Z

4

The second one should be declared using

angular.module('filters').filter(....)

syntax.

The syntax you are using creates a new module everytime.

answered Oct 1, 2013 at 4:25

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

6 Comments

bicycle Over a year ago

Thanks that solved it. It would have been nice they mentioned that somewhere. I couldn't find it anywhere.

Chandermani Over a year ago

Actually it is there in developer guide docs.angularjs.org/guide/module under Create vs Retrieval section

bicycle Over a year ago

I think you only would know that page when you already know the answer. Otherwise you're just thinking wtf It should say there in docs.angularjs.org/guide/module or an example where they make two filters

Chandermani Over a year ago

Agreed, but this should also make you inquisitive about what is this syntax about,and hence explore the documentation :)

bicycle Over a year ago

I did, for 1.5 hour :(

|

jz999 · Accepted Answer · 2014-10-17 18:56:12Z

1

One way to separate the filters out into individual files would be to create a filter module that requires the filters individually:

// init.js
angular.module('application', ['application.filters'])  

// filters.js    
angular.module('application.filters', [
               'filters.currencyCents',
               'filters.percentage',
               ]);  


// percentage.js        
angular.module('filters.percentage', []).filter('percentage', function() {
  return function(decimal, sigFigs) {
    ...
  };
});

answered Oct 17, 2014 at 18:56

jz999

6191 gold badge7 silver badges13 bronze badges

Comments

a8m · Accepted Answer · 2014-09-11 08:25:45Z

0

angular.module('filters')
  .filter({
    groupBy: ['$parse', groupByFilter],
    countBy: [countByFilter]
  });

//function to handle the filter
function groupByFilter($parse) {
  return function(input) {
    ...
  }
}

answered Sep 11, 2014 at 8:25

a8m

9,4844 gold badges39 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to create multiple custom filters within a single module in Angularjs

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related