Description :
This is very simple example of the ng-bind-html directive. In this example we used html tags in the $scope.myHTML variables's value, as the html word is in bold tag and the word url is anchor tag. We bind the $scope.myHTML variable with the ng-bind-html directive. This directive makes the html word bold and url as a anchor tag. ngSanitize dependency is required to work with ng-bind-html directive and to get output as html you need to make the html as trusted html. See the example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<any ng-bind-html="myHTML"></any>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller('myController', ['$scope','$sce', function ($scope,$sce) {
$scope.myHTML = $sce.trustAsHtml('This is an <b>html </b>string with ' + '<a href="">url!</a>');
}]);
</script>
</body>
</html>
Description :
In this example $scope.myInputText variable has trusted html with the text "My name is John Steve" and the name "John Steve" is in bold tag. The variable $scope.myInputText is bind with the ng-bind-html directive and shows the name as bold. See the output.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<span ng-bind-html="myInputText"></span>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller('myController', ['$scope','$sce', function ($scope,$sce) {
$scope.myInputText = $sce.trustAsHtml("My name is <span><b>John Steve</b></span>");
}]);
</script>
</body>
</html>
Description :
In this example the variable $scope.myInputText has trusted html. The html contain a textbox and this variable is bind with the ng-bind-html directive so after the Your Name label a textbox shows which we bind with the directive. See the output.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Your Name: <div ng-bind-html="myInputText"></div>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller('myController', ['$scope', '$sce', function ($scope, $sce) {
$scope.myInputText = $sce.trustAsHtml("<input type='text' ng-model='name'/>");
}]);
</script>
</body>
</html>
Description :
In this example, We are going to draw a table using ng-bind-html, Here we have two textboxes where user will enter the no of rows and columns required. Lets say if we enter 5 in rows and 5 in columns then it will draw a table of size 5*5. Let's see the example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="myController">
<div class="container">
<div class="row well">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-2 col-md-8 form-horizontal">
<div class="row form-group">
<div class="col-md-2 control-label">
Rows
</div>
<div class="col-md-3">
<input type="number" ng-model="rows" class="form-control" />
</div>
<div class="col-md-2 control-label">
Columns
</div>
<div class="col-md-3">
<input type="number" ng-model="columns" class="form-control" />
</div>
<div class="col-md-2">
<button class="btn btn-primary" ng-click="drawTable()">Draw Table</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive"><div ng-bind-html="table"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app", ['ngSanitize']);
app.controller('myController', ['$scope', '$sce', function ($scope, $sce) {
$scope.drawTable = function () {
$scope.table = "<table class='table table-striped table-hover'><tbody>";
for (var i = 0; i < $scope.rows; i++) {
$scope.table += "<tr>";
for (var j = 0; j < $scope.columns; j++) {
$scope.table += "<td>Data</td>";
}
$scope.table += "</tr>"
}
$scope.table += "</tbody></table>";
}
}]);
</script>
<style type="text/css">
.control-label{
text-align:left !important;
}
</style>
</body>
</html>
Description :
In this example, We will create a panel using ng-bind-html. To achieve this, we have taken a scope variable with name panel and assigned the dynamic html to it like : $scope.panel = "
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="myController">
<div class="container">
<div class="row well">
<div class="col-md-offset-2 col-md-8">
<div ng-bind-html="panel"></div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app", ['ngSanitize']);
app.controller('myController', ['$scope', '$sce', function ($scope, $sce) {
$scope.panel = "<div class='panel panel-primary'><div class='panel-heading'>LearnIT</div>";
$scope.panel += "<div class='panel-body'>LearnIT is a website for Beginner and Professional to learn AngularJS step by step and the biggest advantage is that while learning you can experiment your code Online.</div></div>";
}]);
</script>
</body>
</html>
Description :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
<style>
.showTags {
border: 1px solid black;
padding: 5px;
width: 150px;
border-radius: 3px;
color: tomato;
text-align: center;
}
.showTags span {
font-size: 12px;
color: blue;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div class="showTags" ng-repeat="ex in examples">
<div ng-bind-html="ex.name"></div>
<span>{{ex.msg}}</span>
</div>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller('myController', ['$scope', function ($scope) {
$scope.examples = [{
name: "<a href='http://learnit.visrosoftware.com/'>LeartIt</a>",
msg: "this is an anchor tag"
}, {
name: "<img src='http://learnkode.com/assets/img/logo_red.png'/>",
msg: "this is an image tag"
}, {
name: "Welcome to the world of AngularJS!",
msg: "this is just plain text"
}];
}]);
</script>
</body>
</html>
Description :
In this example, we are creating a custom filter that will basically sub-string till the provided length and then create a anchor tag from it Here is the custom filter: app.filter('ellipsis', function () { return function (text, length) { if (text.length > length) { return text.substr(0, length) + "" + text.substr(length, 10) + ""; }; return text; }; }); And html side will look like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-bind-html="text | ellipsis:3"></div>
<div ng-bind-html="text | ellipsis:4"></div>
<div ng-bind-html="text | ellipsis:5"></div>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller('myController', ['$scope', function ($scope) {
$scope.text = "LearnIt";
}]);
app.filter('ellipsis', function () {
return function (text, length) {
if (text.length > length) {
return text.substr(0, length) + "<a href='http://learnit.visrosoftware.com/'>" + text.substr(length, 10) + "</a>";
};
return text;
};
});
</script>
</body>
</html>
Description :
In this example, We basically use ng-repeat to iterate on an object items and create links or span label means whatever html you provide. scope object is: $scope.items = [{ html: "
" }, { html: "Link" }]; html side:
See the example below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="item in items" ng-bind-html="item.html">
</div>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller('myController', ['$scope', function ($scope) {
$scope.items = [{ html: "<h2>LearnIt</h2>" }, { html: "<a href='http://learnit.visrosoftware.com/'>Link</a>" }];
}]);
</script>
</body>
</html>