Description :
This is very simple example of the ng-bind-template directive. With the help of ng-bind-template directive we can bind multiple variables with the dom objects. In the example we display the full name using the ng-bind-template directive by binding the firstname and lastname two different variable with the one span tag. like: ng-bind-template="{{firstName}}-{{lastName}}"
<!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>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<label>First Name <input type="text" ng-model="firstName" /> </label>
<label>Last Name <input type="text" ng-model="lastName" /> </label>
<br />
<b>Full Name:-</b><span ng-bind-template="{{firstName}}-{{lastName}}">
</span>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.firstName = 'John';
$scope.lastName = 'Marl';
}]);
</script>
</body>
</html>
Description :
In this example, we have an array named flowersArray with the name and guantity of the flower. We bind this array with the dropdown list and as we select any flower name from the select list then name and quantity both values of the selected flower bind with the span tag using ng-bind-template.
<!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>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<label>Flower <select ng-model="flower" ng-options="flowerArray as flowerArray.name for flowerArray in flowersArray"></select></label><br />
<b>Flower:</b> <span data-ng-bind-template="{{flower.name}}"></span>
<b>Quantity:</b> <span data-ng-bind-template="{{flower.quantity}} "></span>
<br />
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.flowersArray = [{ name: "Rose", quantity: 17 }, { name: "Sun Flower", quantity: 12 }, { name: "Merry Gold", quantity: 32 }, { name: "Lily", quantity: 45 }, { name: "Bluebell", quantity: 26 }, { name: "Bergamot", quantity: 33 }, { name: "Bellflower", quantity: 21 }, { name: "Begonia", quantity: 26 }, { name: "Aster", quantity: 34 }]
}]);
</script>
</body>
</html>
Description :
In this example we have two checkboxes for hobbies, one for Reading News Paper and other for play cricket and values of the both checkboxes bind with the span tag and show Yes or No based on the true or false value of the checkboxes using the ng-bind-template directive.
<!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>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
Hobbies:<br />
<label>Reading News Paper <input type="checkbox" ng-model="news" /> </label><br />
<label>Play Cricket <input type="checkbox" ng-model="cricket" /> </label><br />
ng-bind-template: <span data-ng-bind-template="{{news==true?'Yes':'No'}},{{cricket==true?'Yes':'No'}}"></span>
<br />
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.news = true;
$scope.cricket = false;
}]);
</script>
</body>
</html>
Description :
In this example we have two checkboxes for hobbies one for reading news paper and other for play cricket, we bind the values of these two checkboxes with span tag using the ng-bind-template directive and also by ng-bind directive with another span tag. When we bind the values of the checkboxes using ng-bind-template directive we bind both the values with one span tag and for ng-bind directive we bind the values with two different span tags.
<!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>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
Hobbies:<br />
<label>Reading News Paper <input type="checkbox" ng-model="news" /> </label><br />
<label>Play Cricket <input type="checkbox" ng-model="cricket" /> </label><br />
ng-bind-template: <span data-ng-bind-template="{{news==true?'Yes':'No'}},{{cricket==true?'Yes':'No'}}"></span><br />
ng-bind: <span data-ng-bind="news==true?'Yes':'No'"></span>,<span data-ng-bind="cricket==true?'Yes':'No'"></span>
<br />
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.news = true;
$scope.cricket = true;
}]);
</script>
</body>
</html>
Description :
In this example we have two radiobuttons for gender one for male and other for female. we bind the value of the selected gender and value of $scope.msg variable with the span tag below the radio buttons using the ng-bind-template directive.
<!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>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
Gender:<br />
<label>Male <input type="radio" name="r1" ng-model="gender" value="Male" /> </label><br />
<label>Female <input type="radio" name="r1" ng-model="gender" value="Female" /> </label><br />
<span data-ng-bind-template="{{msg}} {{gender}}"></span>
<br />
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.msg="You selected your gender = ";
$scope.gender = "Male"
}]);
</script>
</body>
</html>
Description :
In this example, We are creating span html using ng-repeat and binding span tag ng-bind-template. This will print output as: 1. Visrosoftware Panchkula! 2. Visrosoftware Panchkula! 3. Visrosoftware Panchkula!
<!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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<div class="container">
<label>
Company Name: <input class="form-control" type="text" ng-model="cName"><br>
</label>
<label>
Location: <input class="form-control" type="text" ng-model="location"><br>
</label>
<div ng-repeat="key in counter">
<p><span ng-bind-template="{{key}}. {{cName}} {{location}}!"></span></p>
</div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.cName = 'Visrosoftware';
$scope.location = 'Panchkula';
$scope.counter = ['1', '2', '3'];
}]);
</script>
</body>
</html>
Description :
In this example of ng-bind-template, We are going to print the object properties in span element like and in js, we will define the customer object like: $scope.customer = { name: "Learn It", address: "2306/7 Sector 20 Chandigarh", email: "[email protected]" };
<!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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<div class="container">
<span ng-bind-template="{{ customer.name}} {{ customer.address }} {{ customer.email }}"></span>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.customer = { name: "Learn It", address: "2306/7 Sector 20 Chandigarh", email: "[email protected]" };
}]);
</script>
</body>
</html>
Description :
In this example of ng-bind-template, We are printing the count of Football and Baseball like Number of Footballs:
Number of Baseballs:
<!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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<div class="container">
<label>Football<input class="form-control" min="0" type="number" ng-model="Football" /></label><br />
<label>Baseball<input class="form-control" min="0" type="number" ng-model="Baseball" /></label><br />
Number of Footballs: <span ng-bind-template="{{Football}}"></span><br />
Number of Baseballs: <span ng-bind-template="{{Baseball}}"></span>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.Football = 1;
$scope.Baseball = 2;
}]);
</script>
</body>
</html>