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

{p> 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>。

Answer 2

<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>"
  }
})

阻止Angular.js从json文件中删除html格式

2 个答案: