Disable, If, and Click directives in AngularJS
Disable Directive: Disable directive is used to disable specific HTML element. We can define disable directive by using ng-disabled and it takes input value as true or false.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app> <input type="checkbox" ng-model="check1" /><label for="check1">Disable Button</label><br /> <input type="button" ng-disabled="check1" value="Click" /> </body> </html>
As shown in above code, if we check the checkbox button will get disabled because we are binding checkbox model check1 to button ng-disabled directive.
If Directive: “If” directive used to add or remove specific portion of the HTML content. Use ng-if to use “if” directive.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app> <input type="checkbox" ng-model="check1" /><label for="check1">Disable Button</label><br /> <div ng-if="check1"> <h1>This is example for if directive</h1> <p>if directive content</p> </div> </body> </html>
Whenever we select the checkbox, the dive content will get display. The “if directive” also takes true or false as input.
Click Directive: Click directive is used to evaluate the expression by defining click event. It can be defined by using ng-click syntax.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app ng-init="sum=0"> <input type="button" value="Click" ng-click="sum=sum+1"/> <div ng-bind="sum"></div> </body> </html>
Here we initialize the variable sum as 0 and binding the sum variable to div tag. Through ng-click directive we are increasing sum variable value by 1 per each button click.
