Custom filter not working angular js

Question

I am creating a custom filter in angular js this is my html,

<div class="box-body">

<div class="form-group">
    <label>Page-Title:</label>
    <input type="text" required value="" data-ng-model="title" name="page_title" class="form-control" id="" placeholder="Enter Page Title">                     
</div>

<div class="form-group">
    <label>Page-Alias:</label>
    <input type="text" value="@{{ title | replaceSpace}}" name="page_alias" class="form-control" id="" placeholder="Auto-Generated If Left Blank">
</div>

This is my angular js code

var app = angular.module('CustomAngular', []);
app.controller('CustomCtrl', function ($scope) {
    app.filter('replaceSpace', function () {
        return function (input) {
            return input.replace(/ /g, '-').toLowerCase();
        };
    });
});

The filter is not working and also I get error in the console.

Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=slugifyFilterProvider%20%3C-%20slugifyFilter
    at Error (<anonymous>)

If I use filter: infront of the filter name I donot get any errors in console but it's still not working.

<input type="text" value="@{{ title | filter:replaceSpace }}" name="page_alias" class="form-control" id="" placeholder="Auto-Generated If Left Blank">

You should not be defining the filter inside your controller, but outside of it. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Apr 22, 2015 at 14:56
I have done so but still I am getting error in my console and if I use this , value="@{{ title | filter:replaceSpace }}" in my alias input field I get no error but the code doesn't work i.e the filter is not doing it's work am I doing something wrong with the binding between the two input fields @Sergiu Paraschiv — xenish
– xenish, Commented Apr 22, 2015 at 15:16

Mark Pieszak - Trilon.io · Accepted Answer · 2015-04-22 14:56:41Z

3

You don't put filters inside of a controller, put it after your var app line. It's a separate thing just like controllers / directives / etc.

var app = angular.module('CustomAngular', []);

// Here's where it goes
// Also now any/all controllers can use it!

app.filter('replaceSpace', function () {
    return function (input) {
        return input.replace(/ /g, '-').toLowerCase();
    };
});

app.controller('CustomCtrl', function ($scope) {

});

answered Apr 22, 2015 at 14:56

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

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

1 Comment

xenish Over a year ago

well now I have the same code as yours but still I am getting error in my console and if I use this , value="@{{ title | filter:replaceSpace }}" in my alias input field I get no error but the code doesn't work i.e the filter is not doing it's work am I doing something wrong with the binding between the two input fields @mcpDESIGNS

maurycy · Accepted Answer · 2015-04-22 15:31:33Z

2

You should define filter outside of controller and not use filter: as it has different meaning, that's the correct way to use your filter

<input type="text" value="@{{ title | replaceSpace }}" name="page_alias" class="form-control" id="" placeholder="Auto-Generated If Left Blank">

although you should either initialize model by $scope.title = '' or place a check in your filter to run replace only when input is defined, otherwise you will get JS errors

filter: is used to filter the array from model, and when you pass another filter to it it does nothing

edited Apr 22, 2015 at 15:31

answered Apr 22, 2015 at 15:10

maurycy

8,4201 gold badge30 silver badges44 bronze badges

3 Comments

xenish Over a year ago

if I do so I get error in my console and also the binding between the two input field does not work, the alias input field will have {{ title | replaceSpace }} initially when the page loads . The error I get in my console is: Error: [$interpolate:interr] errors.angularjs.org/1.3.15/$interpolate/……D%7D&p1=TypeError%3A%20Cannot%20call%20method%20'replace'%20of%20undefined at Error (<anonymous>)

maurycy Over a year ago

looks like title isn't initialised by that time then, either state in controller $scope.title = '' or in your filter check if value is undefined before replacing

xenish Over a year ago

thanks a lot update your answer so I can accept you answer as best

Collectives™ on Stack Overflow

Custom filter not working angular js

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related