In this tutorial, we are going to discuss ng-bind-template in Angular Js. We have already familiar with ng-bind and ng-bind-html. Like both directives, ng-bind-template is also used to bind variables with dom objects.

Introduction:

With ng-bind-template we can bind multiple variables with dom objects.  ng-bind-template can be used to bind template with the text content. ng-bind-template can contain multiple { { } } expressions.

ng-bind-template

The syntax for declaring ng-bind-template Attribute:

<element ng-bind-template="expression"></element>

Where:

The expression specifies more than one expression to evaluate.  Each expression is surrounded by { {} }.

Let’s look at the following example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title> Debug on Web Demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.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="controllerName">
 <label>First Name <input type="text" class="form-control" ng-model="firstName" /> </label>
 <label>Last Name <input type="text" class="form-control" ng-model="lastName" /> </label>
 <br />
 <b> Your Full Name Is:-</b><span ng-bind-template="{{firstName}}-{{lastName}}">
 </span>
 </div>
<script>
 var app = angular.module("app", []);
 app.controller('controllerName', ['$scope', function ($scope) {
 $scope.firstName = 'Vinod';
 $scope.lastName = 'Palne';
 }]);
</script>
</body>
</html>

You can see the demo of the above example here.

Example 2:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Debug on Web Demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.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="controllerName">
 <label>Select Employee <select class="form-control" ng-model="emp" ng-options="emplist as emplist.name for emplist in emplist"></select></label><br />
 <b>Employee Name:</b> <span data-ng-bind-template="{{emp.name}}"></span> 
 <b>Employee ID:</b> <span data-ng-bind-template="{{emp.id}} "></span> 
 <br />
 </div>
<script>
 var app = angular.module("app", []);
 app.controller('controllerName', ['$scope', function ($scope) {
 $scope.emplist = [{ name: "User1", id: 1 }, { name: "user2", id: 2 }, { name: "user3", id: 3 }, { name: "user4", id: 4 },{ name: "user5", id: 2 },{ name: "user6", id: 6 }]
 }]);
</script>
</body>
</html>

You can find the demo of Example2 here.

I hope you understand what is ng-bind-template directive in Angular Js and why we use this attribute in Angular Js.

You must also follow the related links:

Thank You.

Leave a Comment