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>

但是如果我在Content中有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']);

您可以阅读有关ng-bind-html HERE的更多信息。

Answer 2

使用ngBindHtml：

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

Answer 3

不要将HTML标记作为内容的一部分加载，只需将其替换为名称（例如，只需＆＃34; Content2＆＃34;），然后将其加载到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>

如何在Angular中的JSON属性中绑定HTML数据

3 个答案: