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

In AngularJS, you can use the ng-repeat directive to render HTML values dynamically. However, it’s important to be cautious when rendering HTML content dynamically, as it can expose your application to security vulnerabilities like Cross-Site Scripting (XSS) attacks if not handled properly.

Html Structure:-

<!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:'Roshan 1', description:'<h1>Test for it</h1>'},
      {title:'Roshan 2', description:'<strong>Here is bold</strong>'},
      {title:'Roshan 3', description:'It is normal'},
    ];


  });


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


</script>


</body>
</html>

Output:-

Hopefully, It will help you ..!!!

Related Posts

Renting a Bike, Scooter, or Car in Japan: A Rider’s Honest Guide to Roads, Rules, and Fleet Tools

Introduction Ask any rider about Japan, and their eyes light up. The roads feel almost unfair. Smooth surfaces. Sharp markings. Drivers who actually follow the rules. Add…

Read More

How Long Does Pilot Training Take? Real Timelines for Every License

Introduction Most people who dream of flying never start. Not because they lack talent. Not because they lack passion. They simply never find a clear answer to…

Read More

Free Blogging Platform Guide: Create a Blog for Free, Publish Articles Online, and Join a Writing Community

Introduction You have ideas worth sharing. Maybe you want to write about technology. Maybe you want to document your travels. Or maybe your business needs a place…

Read More

Offer Letter Management Software: How to Speed Up Candidate Acceptance

Hiring a talented person feels great. The interview went well, and the team said yes to you. Everyone smiles and waits for day one. But then the…

Read More

How TheDataOps Explains Predictive Maintenance in Pipelines

Your data pipelines break down at the worst possible time. You wake up to angry texts from your team because morning reports are blank. You spend hours…

Read More

Customer Reviews and Ratings: Why Verified Feedback Matters Most

Introduction Shopping online in India is exciting today. You can find millions of gadgets, appliances, and tools with just one click. Yet, this massive choice creates a…

Read More
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
0
Would love your thoughts, please comment.x
()
x