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](http://stackoverflow.com/questions/24463473/add-more-text-after-using-a-filter-in-ng-bind-in-angularjs) — Doug E Fresh, Aug 10 '15 at 15:34

score 9 · Accepted Answer · edited Jul 11 '16 at 09:11

9

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

edited Jul 11 '16 at 09:11

Filip Cornelissen

answered Aug 10 '15 at 15:20

André Tiago

score 3 · Answer 2 · edited Aug 10 '15 at 15:22

3

The syntax for this is :

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

edited Aug 10 '15 at 15:22

Pankaj Parkar

answered Aug 10 '15 at 15:18

score 2 · Answer 3 · answered Aug 10 '15 at 15:20

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 '15 at 15:20

Joy

it could be done on HTML would be more better using `number` filter itself like this http://stackoverflow.com/a/31923315/2435473 – Pankaj Parkar Aug 10 '15 at 15:23

score 1 · Answer 4 · answered Aug 10 '15 at 15:20

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 '15 at 15:20

Doug E Fresh

4 Answers4