Custom filter in AngularJS

Question

I just made a simple custom filter to strip some chars from a string

angular.module('myApp.filters').filter('myFilter', function() {
return function(string) {
    string = string.replace('[', '');
    string = string.replace(']', '');
    string = string.replace('","', ', ');
    string = string.replace('"', '');

    return string;
}
});

then in the template

<td>[[res[0].names | myFilter]]</td>

but I keep getting this error:

Unknown provider: myFilterFilterProvider <- myFilterFilter

I also tried to inject this filter in the controller responsible for that template but no luck. Am I missing something?

Did you include myApp.filters as a dependency in you main app module or another module that is already listed as a dependency? — charlietfl
– charlietfl, Commented May 22, 2021 at 15:22
yes, I have a file called app.js with this string angular.module('myApp.filters', []); — user3174311
– user3174311, Commented May 22, 2021 at 15:30
So the ng-app in html is ng-app="myApp.filters"? Create a demo that reproduces problem — charlietfl
– charlietfl, Commented May 22, 2021 at 15:32
no in the html I only have a ng-controller, is that the issue? I just tried to add it but still the same. — user3174311
– user3174311, Commented May 22, 2021 at 15:50
Definitely seems you don't have the whole app wired together properly. There can be many modules but they must be included as dependencies under one module that is used as the ng-app. Need to see how you configured controller module to help more — charlietfl
– charlietfl, Commented May 22, 2021 at 16:08

aUXcoder · Accepted Answer · 2021-05-28 21:32:34Z

1

You can build your filter as an angular module and then add that module as a application dependency or just add the filter in the application declaration.

// create a module
angular.module('myApp.filters', []).filter('myFilter', function() {
  return function(string) {
    string = string.replace('[', '');
    string = string.replace(']', '');
    string = string.replace('","', ', ');
    string = string.replace('"', '');
    return string;
  }
});
// add the module as a dependency
angular.module('myApp', ['myApp.filters']);

or

// in the application declaration
angular.module('myApp', []).filter('myFilter', function() {
  return function(string) {
    string = string.replace('[', '');
    string = string.replace(']', '');
    string = string.replace('","', ', ');
    string = string.replace('"', '');
    return string;
}});

answered May 28, 2021 at 21:32

aUXcoder

1,0771 gold badge20 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Custom filter in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related