從數據庫他們正在發送HTML，如何在DOM中呈現它？

我收到一個對象像這樣從數據庫他們正在發送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)\"/>" 
    },...]

我呈現在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>

，這裏是角部位

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中呈現這些元素？

來源

2015-09-17 NietzscheProgrammer

您可以使用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); 
      } 
     } 
    } 

});

這裏有一個工作plunkr：http://plnkr.co/edit/7iFUhjg6Q0YIwRi47fDm?p=preview

來源

2015-09-17 16:44:17 yvesmancera

不，實際上你的解決方案只顯示文本，我應該怎麼做來顯示按鈕和輸入類型複選框？ – NietzscheProgrammer

您是否在模塊定義中包含'ngSanitize'？ '我的應用程序'，['ngSanitize']）...' – yvesmancera

@NietzscheProgrammer自己嘗試這個我意識到只是ng-bind-html還不夠，我編輯了我的答案並添加了一個工作的plunkr。 – yvesmancera