Ng-Bind-Template-4

 

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