How to convert JSON data value as HTML tag while binding in AngularJS

Question

Here I add some sample example. Its directly binding like

But I need to bind as HTML elements based on the data it need to work. It needs to work like in this example image below. Please help on this.

'use strict';
var app = angular.module('MyApp', []);


app.directive('sample', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      array: '='
    },
    template: '<ul ng-repeat="arr in array" title={{arr.title}}><div>{{arr.Description}}</div></ul>',
    
    link: function(scope) {

    }

  };
})

app.controller('SampleCtrl', ['$scope',
  function($scope) {

    $scope.array = [{
      "title": "0",
      "Description": "<h1>Zero</h1>"
    }, {
      "title": "1",
      "Description": "<h2>First</h2>"
    }, {
      "title": 2,
      "Description": "<h3>Second</h3>"
    }, {
      "title": 3,
      "Description": "<h4>Third</h4>"
    }, {
      "title": 4,
      "Description": "<h5>Fourth</h5>"
    }, {
      "title": 5,
      "Description": "<h6>Fifth</h6>"
    }];

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="SampleCtrl">
    <sample array=array></sample>
  </div>
</div>

Please don't edit the code in question based on the answers provided. It is not correct as it makes your question invalid (with the changes applied, the code produces the output you wanted and not the one you didn't want). I have removed it and put the original code back in (and also made other minor edits). — Harry
– Harry, Commented Dec 22, 2015 at 11:48

Community · Accepted Answer · 2017-05-23 12:04:05Z

1

You need to create a filter as described here by @leeroy-brun so the HTML is marked as trusted.

app.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

And then you can change the template of your directive to use the ng-bind-html attribute.

template: '<ul ng-repeat="arr in array" title={{arr.title}} ng-bind-html="arr.Description | to_trusted"></ul>'

Cheers, Pablo.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Dec 19, 2015 at 14:06

Puigcerber

10.2k6 gold badges43 silver badges52 bronze badges

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

Comments

M21B8 · Accepted Answer · 2015-12-18 16:32:18Z

0

try this in your template:

<div ng-bind-html="arr.Description"></div>

answered Dec 18, 2015 at 16:32

M21B8

1,89710 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to convert JSON data value as HTML tag while binding in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related