Question

我收到了像这样的对象

[
  {
    "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)\"/>"
  },...]

我在DOM中渲染该对象，但是现在，如下图所示

这是动态表的HTML部分

      <table>
        <thead>
          <tr>
            <th ng-repeat="column in cols" ng-init="isXX = column.indexOf('XX') === 0">
              <span ng-if="isXX">{{column.substring(3).replace('_', ' ')}}</span>
              <span ng-if="!isXX">{{column}}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in rows">
            <td ng-repeat="column in cols">
              <span>{{row[column]}}</span>
            </td>
          </tr>
        </tbody>
      </table>

这是Angular部分

    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]);
      }
    }

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

我需要知道的是，我应该怎么做才能在DOM中呈现这些元素？

Answer 1

您可以使用ngBindHtml。

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

由于您是通过$http调用获取HTML的，因此您必须使用$sce.trustAsHtml在需要此行的每一行行列中正确显示此HTML：

$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);
            }
        }
    }

});

这是一个有效的傻瓜：http://plnkr.co/edit/7iFUhjg6Q0YIwRi47fDm?p=preview

Answer 2

您可以使用ngSanitize来完成。

在这里查看。 https://docs.angularjs.org/api/ngSanitize

然后，您可以使用ng-bind-html指令，该指令将HTML代码呈现给DOM元素。

并且，元素中的Javascript可以使用trustAsHtml服务的$sce方法应用。

我在这里举了一个例子。 http://plnkr.co/edit/sTEUIWHwGXSAUSQ2rC8y?p=preview

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

2 个答案: