AngularJS append text to ng-bind with filter

Question

I have this code (output=1,000):

<span ng-bind"item.num | number : 0"></span>

But i want something like 1,000 km. Any way to do this without create a new span.

Something like this isn't working:

<span ng-bind"item.num + ' km' | number : 0"></span>

possible duplicate of Add more text after using a filter in ng-bind in angularjs — Doug E Fresh
– Doug E Fresh, Commented Aug 10, 2015 at 15:34

Filip Cornelissen · Accepted Answer · 2016-07-11 09:11:42Z

9

<span ng-bind="(input | filter) + 'km'"></span>

edited Jul 11, 2016 at 9:11

Filip Cornelissen

3,7523 gold badges34 silver badges41 bronze badges

answered Aug 10, 2015 at 15:20

André Tiago

1312 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2015-08-10 15:22:14Z

3

The syntax for this is :

<span ng-bind="(item.num | number : 0) + ' km' "></span>

Working Plunkr

edited Aug 10, 2015 at 15:22

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Aug 10, 2015 at 15:18

Pierre-Alexandre Moller

2,3541 gold badge22 silver badges29 bronze badges

Comments

Joy · Accepted Answer · 2015-08-10 15:20:52Z

2

As a more generic solution, specify a custom filter JSFiddle:

.filter('formatNumber', function () {
    return function (input) {
        return input + 'km';
    }
});

And:

<span ng-bind="item.num | formatNumber"></span>

answered Aug 10, 2015 at 15:20

Joy

9,60011 gold badges50 silver badges99 bronze badges

1 Comment

Pankaj Parkar Over a year ago

it could be done on HTML would be more better using number filter itself like this stackoverflow.com/a/31923315/2435473

Doug E Fresh · Accepted Answer · 2015-08-10 15:20:50Z

1

You can do this by using parenthesis.

<span ng-bind"(item.num | number : 0) + 'km' "></span>

If the unit is always km and is not dynamic, you can just put it in the regular text.

<div><p><span ng-bind"item.num | number : 0"></span>km</p></div>

answered Aug 10, 2015 at 15:20

Doug E Fresh

8409 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS append text to ng-bind with filter

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related