Using HTML tags in Angular Scope Data

Question

In my Angular app, I have some data that I need to include html tags in and I'm having some trouble making sure it gets escaped.

 $scope.groups = [
    {
      'name': 'min',
      'item': '<h1>This is some awsome H1</h1><ul><li>yup></li></ul>',
    },
     {
      'name': 'min',
      'item': '<h1>This is some awsome H1</h1><ul><li>yup></li></ul>',
    },
     {
      'name': 'min',
      'item': '<h1>This is some awsome H1</h1><ul><li>yup></li></ul>',
    },
     {
      'name': 'min',
      'item': '<h1>This is some awsome H1</h1><ul><li>yup></li></ul>',
    }
  ];

And here's my html

<div ng-repeat="group in groups">
  <li>{{group.name}}</li>
  <li>{{group.item}}</li>
</div>

I tried just including some of angular's ng-sanitize, but I've only seen examples where its a single object, and not an array.

See here

I try to add ng-bind-html="groups" to the main div but my data comes out as [object Object].

Any ideas? Any help is appreciated!

Have you tried ng-bind-html="group.item" on the second <li>? — mingos
– mingos, Commented Apr 24, 2014 at 22:21
YES! Thanks for the quick replay. Want to answer it and I'll mark it as correct — mhartington
– mhartington, Commented Apr 24, 2014 at 22:24
@mingos I have deleted my answer. You can go ahead and post yours :) — javaCity
– javaCity, Commented Apr 24, 2014 at 22:28
@javaCity I had already written my answer when I noticed the "new answer was posted" banner. Plus, since you made an effort to create the plunker, I didn't want your work to go to waste :) — mingos
– mingos, Commented Apr 24, 2014 at 22:37

mingos · Accepted Answer · 2014-04-24 22:34:18Z

4

The ngBindHtml directive accepts a string containing HTML and should be used directly on the tag wherein that HTML string should be rendered. Instead of using it on the container, use it directly on the second <li> like this:

<div ng-repeat="group in groups">
    <li>{{group.name}}</li>
    <li ng-bind-html="group.item"></li>
</div>

@javaCoin created a Plunker illustrating this; let's not let it go to waste and paste it here: http://plnkr.co/edit/PFaxHqpyQvWqln5ABHRc?p=preview

answered Apr 24, 2014 at 22:34

mingos

24.7k12 gold badges73 silver badges108 bronze badges

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

Comments

Casao · Accepted Answer · 2014-04-24 22:31:36Z

1

ng-bind-html is on the specific item you want the code in.

So, your example becomes:

<div ng-repeat="group in groups">
  <li>{{group.name}}</li>
  <li ng-bind-html="group.item"></li>
</div>

http://plnkr.co/edit/CO5WUCgBnOEJrVoKKrEE?p=preview shows a quick and dirty example of this.

answered Apr 24, 2014 at 22:31

Casao

5422 silver badges6 bronze badges

Collectives™ on Stack Overflow

Using HTML tags in Angular Scope Data

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related