防止Angular.js剝離出json文件的html格式

Question

我正在嘗試使用Angular 1遍歷json文件中的數據。數據之一包含HTML字段集和表格數據。 Angular正在剝離這一點。我怎樣才能防止這一點？

這是我使用的應用程序的代碼：

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

app.controller('crisisCtrl', function($scope, $http) { 
    $http.get("data.php").then(function(response) { 
     $scope.mkyData = response.data.records; 
    }); 
}); 

JSON文件（data.php）：

{ 
    "records": [ 
    { 

     "Card": "3", 
     "Title": "Blah", 
     "Content": "<fieldset class=\"table bt-0\"><thead><tr><th>Name</th><th>Role</th><th>Number</th></tr></thead><tbody><tr><td>Bill</td><td> Director</td><td><a href=\"tel:000\">304 304-3042</a></td></tr><tr><td>Mary</td><td>Technical</td><td><a href=\"tel:000\">304 304-3042</a></td></tr><tr><td>Hannah</td><td>Engineer</td><td><a href=\"tel:000\">120 104-4042</a></td></tr></tbody></fielset>" 
     } 
     ] 
    } 

而我的HTML文件中：

<div class="container" ng-app="myApp" ng-controller="crisisCtrl"> 
    <div class="card" ng-repeat="x in myData"> 
     <div class="card-block" ng-bind-html="x.Content"></div> 
    </div> 
</div> 

這是一個調整小提琴：

http://jsfiddle.net/deCcG/2/

Answer 1

的<fieldset class=\"table bt-0\">是什麼原因造成的問題，如果您添加表元素的角度，然後將能夠閱讀HTML與正確的元件和顯示器被正確格式正確

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

app.controller('myCtrl', function($scope) { 
    $scope.page = { 
    "title": "Getting Started", 
    "content": "<fieldset class=\"table bt-0\"><table><thead><tr><th>Name </th><th>Role</th><th>Number</th></tr></thead><tbody><tr><td>Bill Williams</td><td>Widget Director</td><td><a href=\"tel:000\">+1 304 304-3042</a></td></tr><tr><td>Mary Barnhill</td><td>Technical</td><td><a href=\"tel:000\">+44 304 304-3042</a></td></tr><tr><td>Hannah Kwak</td><td>Engineer</td><td><a href=\"tel:000\">+44 120 104-4042</a></td></tr></tbody></table></fieldset>" 
    } 
}) 

Answer 2

thead和tbody應用於table。您的瀏覽器可能會接受它，但Angular不支持。

嘗試只需更新您的$scope.page.content有：

"content":"<fieldset class=\"table bt-0\"><table><thead><tr><th>Name</th><th>Role</th><th>Number</th></tr></thead><tbody><tr><td>Bill Williams</td><td>Widget Director</td><td><a href=\"tel:000\">+1 304 304-3042</a></td></tr><tr><td>Mary Barnhill</td><td>Technical</td><td><a href=\"tel:000\">+44 304 304-3042</a></td></tr><tr><td>Hannah Kwak</td><td>Engineer</td><td><a href=\"tel:000\">+44 120 104-4042</a></td></tr></tbody></table></fieldset>" 

Working Fiddle here。

---

此外，你錯過拼寫收盤</fieldset>。