Ng-Bind-Template-1

 

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>
Output