Add more text after using a filter in ng-bind in angularjs

angularjs ng-bind angular-filters
laggingreflex picture laggingreflex · Jun 28, 2014 · Viewed 53.5k times · Source

So I want to put a variable through a filter inthe ng-bind directive

ng-bind="input | filter"

but I want to insert more text 

ng-bind="input | filter + 'more' "

but this isn't working. Is there a way to add more text in ng-bind, like you could if you were simply using {{}}:

{{input | filter}} more

Answer

ryeballar picture ryeballar · Jun 28, 2014

Instead of interpolating(using {{}}) something in the ng-bind directive you can simply enclose the filtered value with a parenthesis and append your text.

<h1 ng-bind="(input | filter) + ' more stuff'"></h1>

furthermore, if the text you want to add is not in any way dynamic then I suggest you append another element to bind the filtered value and then add the text after that element.

e.g.

<h1><span ng-bind="(input | filter)"></span> more stuff</h1>

This saves you one concatenation process.

Example here

Related questions

AngularJS append text to ng-bind with filter

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.…

Read More
What's the difference between ng-model and ng-bind

I'm currently learning AngularJS and am having difficulty understanding the difference between ng-bind and ng-model. Can anyone tell me how they differ and when one should be used over the other?

Read More
AngularJS : Why ng-bind is better than {{}} in angular?

I was in one of the angular presentation and one of the person in the meeting mentioned ng-bind is better than {{}} binding. One of the reason, ng-bind put the variable in the watch list and only when there is a …

Read More