使用HTML格式生成AngularJS动态行

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

希望有所帮助：）

Answer 2

使用AngularJS中的 ng-repeat指令生成多行的简单示例。

<强> HTML

<div ng-app="myApp" ng-controller="appCtrl">
  <table>
    <tr ng-repeat="i in styleRowDetails">
      <td>{{i.val}}</td>
    </tr>
  </table>
</div>

<强> JS

var myApp = angular.module('myApp', [])

myApp.controller('appCtrl', ['$scope', function($scope) {
  $scope.styleRowDetails = [{
    val: 'welcome'
  }, {
    val: 'hello'
  },{
  val: 'world'
  }
  ];

}]);

工作小提琴：https://jsfiddle.net/rittamdebnath/3oy5fok3/

Answer 3

您应该尝试 ng-bind-html

<td ng-bind-html="styleRowDetail.details"></td>

为了更好地理解，请访问angularjs的documentation ng-bind-html