Decode HTML entities with Angular filter

Question

I am trying to decode html entities from a string using and Angular JS filter.

I have a view that looks like the following:

<div class="roboto medium-gray">
   <span class="item-description">{{item.description | plaintext}}</span>
</div>

As of right now I am applying a filter that strips tags:

.filter('plaintext', function() {
  return function(text) {
    return text ? String(text).replace(/<[^>]+>/gm, '') : '';
  };
})

I am trying to determine a way where i can decode any html enties that are in there.

item.description is "A large house with wrap around porch & pool"

right now after item.description gets passed through the plaintext filter it comes out as:

A large house with wrap around porch & pool

I want it to replace the & with &

Thank you for help in advance.

Eran Shabi · Accepted Answer · 2016-02-03 18:37:53Z

1

You can use ng-bind-html, like so:

<div class="roboto medium-gray">
   <span class="item-description" ng-bind-html="item.description | plaintext"></span>
</div>

For more information see official API Reference.

answered Feb 3, 2016 at 18:37

Eran Shabi

15.2k8 gold badges33 silver badges51 bronze badges

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

2 Comments

Zack Herbert Over a year ago

Thank you for your help. It looks as though this isn't working with the plaintext filter. When I do it that way I get nothing in the UI, get the following: Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

Zack Herbert Over a year ago

had to add $sce into the filter

Collectives™ on Stack Overflow

Decode HTML entities with Angular filter

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related