Ng-Bind-Template-3

 

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