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

How to Buy and Fly Drones in India: Simple Guide for Buyers and Pilots

Flying machines create real excitement across India today. Many people see new career paths open up with these tools. Young students dream of pilot jobs. Farmers want…

Read More

Travel eSIM Comparison Guide: Find Cheap International Data Plans for Any Trip

Introduction You land after a long flight. Your phone shows no signal. The airport SIM queue wraps around the corner. Your home carrier wants a huge fee…

Read More

Mobile Network Codes by Country: Complete Global Guide

Introduction Your phone connects to a cell tower in seconds. You never see the hidden work behind that link. Every SIM card carries secret digital ID numbers….

Read More

Restaurant Reservation Software Guide: Online Bookings, Live Table Management, and Front-of-House Control

Introduction Friday night arrives, and the dining room fills fast. Phones ring nonstop. Guests wait at the door. A paper notebook fills with crossed-out names and rushed…

Read More

Real-Time DataOps Monitoring Case Studies That Protect Your Business Dashboards

Introduction Imagine walking into a Monday morning team meeting ready to share great sales numbers. Suddenly, your manager points out that the revenue chart dropped to zero…

Read More

Unifying Data Culture Across Sales, Marketing, and Engineering

Different departments in your company often collect data in separate, isolated silos. Marketing tracks customer clicks in one tool, while sales logs deals in another spreadsheet. When…

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