AngularJS - How to render HTML value in ng-repeat ?

By Hardik Savani | February 4, 2017 | | 3078 Viewer | Category : jQuery AngularJS


Share this post:



I always post small example of AngularJS function, In this example we learn how to render our HTML code in ng-repeat using trustashtml filter.

Sometimes we have array or object of records with html values, at that time we require to use ng-repeat, But we can't simple way render html code, we should require to use trustashtml or ng-bind-html-unsafe etc. So in this example i created one filter for this task using sce trustashtml. filter as like bellow you can see code of that filter using $sce.trustAsHtml.

Filter

app.filter('trustAsHtml',['$sce', function($sce) {

return function(text) {

return $sce.trustAsHtml(text);

};

}]);

I will give you full example of render html code in ng-repeat using bellow angular filter, so let's see bellow example:

Example

<!DOCTYPE html>

<html>

<head>

<title>AngularJS - How to render HTML value in ng-repeat ?</title>

<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

</head>

<body>


<div class="container" ng-app="mainApp" ng-controller="myController" id="mainController">

<ul>

<li ng-repeat="item in data">

{{ item.title }}

<br/>

<div ng-bind-html="item.description|trustAsHtml">

</div>

</li>

</ul>

</div>


<script type="text/javascript">

var app = angular.module("mainApp", []);

app.controller('myController', function($scope, $timeout) {


$scope.data = [

{title:'Title 1', description:'<h1>Test for it</h1>'},

{title:'Title 2', description:'<strong>Here is bold</strong>'},

{title:'Title 3', description:'It is normal'},

];


});


app.filter('trustAsHtml',['$sce', function($sce) {

return function(text) {

return $sce.trustAsHtml(text);

};

}]);


</script>


</body>

</html>

I hope it can help you...



We are Recommending you: