CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
MarcoS
MarcoS

Reputation: 17711

AngularJS: How to display html data in view?

I am implementing a control to display a list of comments, with AngularJS + Bootstrap.
It's something like this:

  <div class="comments">
    <div ng-repeat="(id, comment) in person.comments" class="row">
      <div class="form-group">
        <div class="col-xs-12">
          <div class="input-group">
            <span class="input-group-addon vertical-align-top">
              <div><i>Date:</i> {{ comment.date }}</div>
              <div><i>By:</i> {{ comment.author }}</div>
            </span>
            <div class="form-control form-control-content">
              {{ comment.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Everything's o.k..
The problem is: comment.content is HTML data (for example it contains line-breaks, hyperlinks, style-formatting, ...). By default HTML is rendered as plain text.

The question is: how do I display data as HTML inside a div?

Upvotes: 0

Views: 1901

Answers (2)

EnigmaRM
EnigmaRM

Reputation: 7632

If you want {{comment.content}} to be interpreted as HTML, you need to look at ngBindHtml directive.

So you'd need to modify it:

<div ng-bind-html="comment.content" class="form-control form-control-content"></div>

You'll have to add $sanitize into your project dependencies, as is noted in the ngBindHtml doc link above.

Upvotes: 1

Danny Blue
Danny Blue

Reputation: 463

You can use ng-bind-html.

<div class="form-control form-control-content" ng-bind-html="comment.content"></div>

Upvotes: 1

Related Questions