using number filter in custom filter Angular JS

Question

I am creating a custom filter for numbers in Angular 1.5 and I need to use the existing number filter in it. I have this number format 3445 and I need to convert it to 3'445. For this purpose, first, I need to pass the input number to the number filter,

3445.05252 -> 3,445.1 -> 3'445.1

The problem is that I don't know how to use the number filter in my filter function. Here is my code:

 app.filter('tick', function () {
      return function(input, $number) {
        var number =$number(input,1);
        return number.toString().replace(",","'");
};

});

I can not use it like 3445.05252 | number:1 | tick. It must be with the number filter inside my filter.

here it is with $filter injected:

app.filter('tick', function () {
return function(input, $filter) {
        var number = $filter('number')(input,1);
    return number.toString().replace(",","'");
};

});

Here is the html code:

<div ng-app="myApp">
    <div ng-controller="MainController">
       <p> {{ 245258.222| tick }}  </p>
    </div>
</div>

And here is my js code:

 var app = angular.module("myApp", []);

 app.controller('MainController', ['$scope', '$window', function($scope, $window) { 
        $scope.price=2355;
        $scope.url="http://google.com";
  }]);
app.filter('tick', function () {
return function(input, $filter) {
        var numberFilter= $filter('number');
        var number =numberFilter(input,1);
    return number.toString().replace(",","'");
};
 });

you tried inject $filter service? and use $filter('number')? — Jesús Quintana
– Jesús Quintana, Commented Aug 19, 2016 at 10:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

The poster has updated the question so I'm adding another answer.

You can inject $filter into your own filter. This will allow you to retrieve the number filter by name and use it however you like.

Example:

app.filter('tick', function ($filter) {
    return function(input) {
        var numberFilter = $filter('number');
        var filteredInput = numberFilter(input, 1);
        return filteredInput.toString().replace(",", "'");
    };
});

Then in the HTML you can just say... 3445.05252 | tick

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 19, 2016 at 10:30

byxor

6,4094 gold badges32 silver badges45 bronze badges

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

4 Comments

green Over a year ago

When I try <p> {{ 245258.222|tick}} </p> , I also get {{ 245258.222|tick}} . Something is not working.

green Over a year ago

I am trying this in JS Fiddle first and I don't know if I can see the console here, but I have pasted the whole code so you can see it.

byxor Over a year ago

Oops I forgot to return a function. In your example you're injecting $filter into the wrong place.

byxor Over a year ago

Excellent! Glad I could help (even if I did make a few mistakes haha).

byxor · Accepted Answer · 2016-08-19 10:13:09Z

1

You can apply multiple filters in angularJS using piping.

Instead of trying to inject $number into your function, just apply both filters to your data in the HTML.

e.g. 3445.05252 | number | thick

This will apply the number filter, then pass the result of that into your thick function.

Result: 3'445.1

answered Aug 19, 2016 at 10:13

byxor

6,4094 gold badges32 silver badges45 bronze badges

1 Comment

byxor Over a year ago

I have posted another answer

Collectives™ on Stack Overflow

using number filter in custom filter Angular JS

2 Answers 2

The poster has updated the question so I'm adding another answer.

Example:

4 Comments

You can apply multiple filters in angularJS using piping.

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

The poster has updated the question so I'm adding another answer.

Example:

4 Comments

You can apply multiple filters in angularJS using piping.

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related