Prevent Angular.js stripping html formatting out of a json file

Question

I'm attempting to iterate through data in a json file using Angular 1. One of the pieces of data contains HTML fieldsets and tabular data. Angular is stripping this out. How can I prevent this?

This is the code I am using for the app:

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 file (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>"
        }
      ]
    }

And within my html file:

<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>

Here's an adjusted fiddle:

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

Mistalis · Accepted Answer · 2016-11-21 16:18:05Z

1

thead and tbody should be used in table. Your browser may accept it, but Angular does not.

Try to just update your $scope.page.content with:

"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.

Furthermore, you miss-spelled the closing </fieldset>.

edited Nov 21, 2016 at 16:18

answered Nov 21, 2016 at 16:05

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pace Over a year ago

FYI, even with the proper spelling fieldset will be stripped out. This is because ng-bind-html sanitizes input by default (see docs.angularjs.org/api/ngSanitize/service/$sanitize) and fieldset is not part of Angular's list of approved elements. You will either have to customize the sanitization provider or explicitly trust the content (using $sce.trustAsHtml)

Pace Over a year ago

Also, a minor point but it is not angular that is stripping out the table fields. It appears to be the jQuery/jQlite html() method that is doing it. Just take a look at jsfiddle.net/fcomt4td/1

Jon D · Accepted Answer · 2016-11-21 16:07:48Z

The <fieldset class=\"table bt-0\"> is what is causing the issue, if you add a table element angular will then be able read the HTML being correctly formatted with correct elements and displays correctly

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

@Igor Sorry, was playing around with my reply and the code, my answer is now complete, should make sense now.

Collectives™ on Stack Overflow

Prevent Angular.js stripping html formatting out of a json file

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related