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

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

In this post we will give you information about AngularJS – How to render HTML value in ng-repeat ?. Hear we will give you detail about AngularJS – How to render HTML value in ng-repeat ?And how to use it also give you demo for it if it is necessary.

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

Hope this code and post will helped you for implement AngularJS – How to render HTML value in ng-repeat ?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

5  +  5  =  

We accept paid advance and paid guest Posting on our Site : Contact US