Javascript 他们从DB发送HTML，如何在DOM中呈现它？

我收到一个这样的东西

[
  {
    "BET": 57630343,
    "CUSTOMER": 181645,
    "SPORT": "MLB",
    "XX_FILL OPEN": "<button class=\"btn\" onclick=\"fillOpen(57630343)\">Fill Open</button>",
    "XX_VIEW": null,
    "XX_CANCEL": "<input type=\"checkbox\" name=\"sports\" value=\"soccer\"  onchange=\"fillOpen(57630343)\"/>"
  },...]

数据库人员正在向我发送我在上面粘贴的json中看到的数据

我需要知道的是，为了在DOM中呈现这些元素，我应该做些什么？

您可以使用它

<tbody>
  <tr ng-repeat="row in rows">
    <td ng-repeat="column in cols" ng-bind-html="row[column]">
    </td>
  </tr>
</tbody>

---

这里有一个工作提示：

您可以使用ngSanitize来完成

在这里检查一下

然后，您可以使用

ngbindhtml

指令，将html代码呈现给DOM元素

而且，元素中的Javascript可以通过

$sce

服务的

trustAsHtml

方法应用

我在这里举了个例子。

---

否，实际上您的解决方案只显示文本，我应该如何显示按钮和输入类型复选框？您是否在模块定义中包括

ngSanitize

angular.module（'myApp'，['ngSanitize']）…

@NietzscheProgrammer当我自己尝试这个时，我意识到仅仅使用ng bind html是不够的，我编辑了我的答案并添加了一个有效的plunkr。

    ReportsFactory.pendingBets(reportParam).then(function(data) {
      if (data.length) {
        gridInfo = _.forEach(data, function(item) {return item;});
        $scope.rows = gridInfo;
        $scope.cols = Object.keys($scope.rows[0]);
      }
    }

<tbody>
  <tr ng-repeat="row in rows">
    <td ng-repeat="column in cols" ng-bind-html="row[column]">
    </td>
  </tr>
</tbody>

$scope.rows.forEach(function(row) {
    for (var key in row) {
        if (key.indexOf('XX') === 0) {
            var value = row[key];
            if (value) {
                row[key] = $sce.trustAsHtml(value);
            }
        }
    }

});