javascript - 具有 HTML 格式的 AngularJS 动态行生成

Question

我正在使用 ng-repeat 在 HTML 上生成表格行。我的行内容中有 HTML 标记，我想用它来格式化内容。但它只会将带有 html 标记的文本打印为纯文本，而不会将它们识别为 HTML 标记。

<tr ng-repeat=" styleRowDetail in styleRowDetails">
  <td>{{styleRowDetail.shortMessage}}
  </td>
  <td>{{styleRowDetail.classOriginated}}
  </td>
  <td>{{styleRowDetail.method}}
  </td>
  <td>{{styleRowDetail.lineRange}}
  </td>
  <td>{{styleRowDetail.details}}
  </td>
</tr>

Answer 1

这是一个工作代码。

var jsondata = [{
  "shortMessage": "data 1",
  "classOriginated": "data 2",
  "method": "<i>data 3</i>",
  "lineRange": "data 4",
  "details": "<b>data 5</b>"
}];

var app = angular.module('myApp', ['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce) {
  $scope.styleRowDetails = jsondata;
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="controller.js"></script>
<h3>Data</h3>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tr ng-repeat=" styleRowDetail in styleRowDetails">
      <td ng-bind-html="styleRowDetail.shortMessage">
      </td>
      <td ng-bind-html="styleRowDetail.classOriginated">
      </td>
      <td ng-bind-html="styleRowDetail.method">
      </td>
      <td ng-bind-html="styleRowDetail.lineRange">
      </td>
      <td ng-bind-html="styleRowDetail.details">
      </td>
    </tr>
  </table>

</div>

希望对您有所帮助:)