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>

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

Answer 2

try this in your template:

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