How to bind HTML data in JSON property in Angular

Question

My JSON looks like:

[
  {
    "Title": "MyTitle1",
    "Content": "<p>Content1</p>",
    "Date": "2014-11-19T10:00:00"
  },
  {
    "Title": "MyTitle2",
    "Content": "<p>Content2</p>",
    "Date": "2014-11-19T00:00:00"
  }
]

I'm getting it in my controller like this:

app.controller('NewsfeedCtrl', function ($scope, $http) {
    $http.get(serverAddress + '/api/newsfeed/page/1').
      success(function (data, status, headers, config) {
          $scope.newsfeeds = data;
      }).
      error(function (data, status, headers, config) {
          console.log("Smth went wrong.");
      });
});

And bind it in view:

<div ng-controller="NewsfeedCtrl">
    <div ng-repeat="newsfeed in newsfeeds">
        {{newsfeed.Title}}
        <br />-
        <br />{{newsfeed.Date}}
        <br />-
        {{newsfeed.Content}}
    </div>
</div>

But if I have HTML tags in Content, how can I have it also binded to view with that tags parsed.

Use ng-bind-html for newsfeed.Content, this way content will be handled as html code, not as plain text. Also you should include ngSanitize module. — Cem Özer
– Cem Özer, Commented Aug 12, 2015 at 13:38

Cem Özer · Accepted Answer · 2015-08-12 13:46:51Z

3

Use ng-bind-html to handle content as html content.

<div ng-controller="NewsfeedCtrl">
    <div ng-repeat="newsfeed in newsfeeds">
        {{newsfeed.Title}}
        <br />-
        <br />{{newsfeed.Date}}
        <br />-
        <div ng-bind-html="newsfeed.Content"></div>
    </div>
</div>

Also don't forget to include ngSanitize module in your application like this.

angular.module('itadPortal', ['ngRoute', 'ngSanitize']);

You can read more about ng-bind-html HERE.

edited Aug 12, 2015 at 13:46

answered Aug 12, 2015 at 13:41

Cem Özer

1,28312 silver badges19 bronze badges

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

1 Comment

Patryk Gułaś Over a year ago

I have one module: var app = angular.module('itadPortal', ['ngRoute']); and start every controller with it. How can I add second module to it?

michelem · Accepted Answer · 2015-08-12 13:40:11Z

0

With ngBindHtml:

<span ng-bind-html="newsfeed.Content"></span>

answered Aug 12, 2015 at 13:40

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Comments

jxmorris12 · Accepted Answer · 2015-08-12 13:44:01Z

0

Instead of loading the HTML tags as part of Content, just replace them with the name (e.g. just "Content2") and load them inside a p tag. So your JSON would look like:

[
  {
    "Title": "MyTitle1",
    "Content": "Content1",
    "Date": "2014-11-19T10:00:00"
  },
  {
    "Title": "MyTitle2",
    "Content": "Content2",
    "Date": "2014-11-19T00:00:00"
  }
]

and your view should contain this line:

<p> {{newsFeed.content}} </p>

answered Aug 12, 2015 at 13:44

jxmorris12

1,4144 gold badges18 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to bind HTML data in JSON property in Angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related