如何使用angularjs ng-repeat將數組中的html字符串轉換爲html？

Question

我有以下數組，其中每個項目的值是一個字符串是HTML。我怎樣才能把這個字符串轉換爲可執行的HTML，以便它可以顯示？

[ 
{html:'<button>name</button>'}, 
{html:'<table > <thead> <tr> <th>#</th> <th>UserName</th> <th>Time</th> <th>Comments</th> <th>Reply</th> <!-- <th>like or dislike</th> --> </tr> </thead> <tbody> <tr> <td>1,001</td> <td><a href="#" >Lorem</a></td> <td>2014-10-31</td> <td>ipsum</td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,002</td> <td>amet</td> <td><a><span ></span></a></td> <td><a><span ></span></a></td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,003</td> <td>Integer</td> <td>nec</td> <td>odio</td> <td> <button type="submit"> <span></span></button></td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>Sed</td> <td>cursus</td> <td> <button type="submit" > <span></span></button></td> </tr> </tbody> </table>'}, 
{html:'<p>myhtml</p>'} 
] 

看到這裏codepen：http://codepen.io/chriscruz/pen/YPwVmb

請參見下面的HTML

<table class="table table-striped table-bordered table-hover" id="dataTables-example"> 
     <thead> 
      <th>Email</th> 
     </thead> 
     <tbody> 
      <tr ng-repeat="(id,item) in data"> 
       <td>{{item.html}}</td> 
      </tr> 
     </tbody> 
    </table> 


</body> 

Javascript和JS角

var app = angular.module("app", ["firebase"]); 

    app.factory("TestArray", ["$firebase", function($firebase) { 
     lst = [ 
     {html:'<button>name</button>'}, 
     {html:'<table > <thead> <tr> <th>#</th> <th>UserName</th> <th>Time</th> <th>Comments</th> <th>Reply</th> <!-- <th>like or dislike</th> --> </tr> </thead> <tbody> <tr> <td>1,001</td> <td><a href="#" >Lorem</a></td> <td>2014-10-31</td> <td>ipsum</td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,002</td> <td>amet</td> <td><a><span ></span></a></td> <td><a><span ></span></a></td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,003</td> <td>Integer</td> <td>nec</td> <td>odio</td> <td> <button type="submit"> <span></span></button></td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>Sed</td> <td>cursus</td> <td> <button type="submit" > <span></span></button></td> </tr> </tbody> </table>'}, 
     {html:'<p>myhtml</p>'} 
     ] 
     return lst; 
    }]); 

    app.controller("ctrl", ["$scope","TestArray", function($scope,TestArray) { 
     $scope.data = TestArray; 
     //$scope.data = Emails; 

    }]); 

這是理想的結果，我想見：http://codepen.io/chriscruz/pen/pvgwzw?editors=101

Answer 1

這裏是Updated CodePen

你需要添加angular-sanitize.js文件

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.js"></script> 

和app

var app = angular.module("app", ["firebase",'ngSanitize']); 

導入ngSanitize模塊，那麼你可以使用ng-bind-html指令

綁定在html

<td ng-bind-html="item.html"></td>