Как связать данные HTML в JSON собственности в угловых

Question

Моя JSON выглядит следующим образом:

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

Я получаю его в мой контроллер, как это:

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."); 
     }); 
}); 

и связать его с точки зрения:

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

Но если у меня есть HTML-теги в Контенте, как я могу его связать, чтобы просмотреть теги, которые были проанализированы.

Answer 1

Использование ng-bind-html для обработки содержимого в качестве содержимого HTML.

<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> 

Также не забудьте включить ngSanitize модуль в вашем приложении, как это.

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

Вы можете прочитать больше о нг-Bind-HTML HERE.

Answer 2

С ngBindHtml:

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

Answer 3

Вместо того, чтобы загружать теги HTML как часть Контента, просто замените их на имя (например, просто «Content2») и загрузите их внутри тега p. Так что ваш JSON будет выглядеть следующим образом:

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

и ваш взгляд должен содержать следующую строку:

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