HTML text in ionic list

Question

i have following list:

<ion-list>
    <ion-item ng-repeat="item in productlistitems">
       {{ item.name }}!
    </ion-item>
</ion-list>

item.name is with HTML tags, but they appear as plain text.

How can I achieve that the HTML code gets "executed"?

Check your console you have an error it stopped processing the page (most likely) — shaunhusain
– shaunhusain, Commented Jun 22, 2016 at 16:47
answer below is likely correct I overlooked the part about it being HTML. Believe if it's just a string literal then $sce isn't necessary but if the HTML comes from a service or otherwise isn't a literal the $sce is needed. — shaunhusain
– shaunhusain, Commented Jun 22, 2016 at 16:59

Matt M · Accepted Answer · 2016-06-22 16:56:57Z

2

In order to render HTML, use the "ng-bind-html" directive like this:

<div ng-bind-html="item.name"></div>

In your controller, you need to "trust" the data using the $sce service like this:

$scope.item.name = $sce.trustAsHtml("your HTML here");

answered Jun 22, 2016 at 16:56

Matt M

3,7795 gold badges53 silver badges78 bronze badges

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

4 Comments

johnbraum Over a year ago

But I use ng-repeat and can't set this for every item? Or am I stupid now.. I'm setting the items like this in app.js: $scope.productlistitems = currentProducts;

Matt M Over a year ago

The link I provided to the $sce service has an example using ng-repeat. I'll try to edit my answer soon.

Matt M Over a year ago

I can give you a better answer if you show what the HTML you're trying to render looks like.

johnbraum Over a year ago

Ah I didn't see the link. Perfect. The example behind the link was great now it works.Thanks.

Collectives™ on Stack Overflow

HTML text in ionic list

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related