0

I used to go with ng-bind (or shorthand {{}}) for binding some text into a span.

<p>Preview: <span>formattedPrice(price)</span></p>

As you can see, I had a function call formattedPrice while binding. Now I realize I should be able to add some HTML into this span. I tried ng-bind-html="formattedPrice(price)" but that doesn't seem to cut it.

Is there a way I can do it without creating another scope variable?

Improve this question

2 Answers 2

Reset to default
1

You should use a filter.

Like this:

<p>Preview: <span>{{price | formatted}}</span></p>

example filter:

angular.module('myFilters', []).filter('formatted', function() {
  return function(input) {
    //return your formatted price here
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Might be a silly question. But does that work for HTML as well? Lets say the formatted price has <strike>$20</strike> $10.
For that you need to do something like this <span ng-bind-html="price | formatted"></span>
0

Make sure your app loads the ngSanitize module:

angular.module('app', ['ngSanitize'])

And on the HTML (example):

<script src="<PATH_TO>/angular-sanitize.js"></script>

Without this module Angular will not be able to correctly parse the HTML you want to render.

Demo

Improve this answer

1 Comment

That indeed was the problem. Would give a try to @johnny's answer as well.