How to disable buttons using AngularJS ?
Sometimes we need to disable the button, link on the click event. In this article, we will see how to do that with the help of AngularJS.
Approach:
- The approach is to use the ng-disabled directive to disable a particular button.
- In the first example a single button is disabled by the click and In the second multiple buttons can be disabled by a single click.
Example 1:
HTML
<!DOCTYPE HTML> <html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.disabledFlag = false; $scope.disableIt = function() { $scope.disabledFlag = true; }; }); </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <p> Disable the button in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <button ng-click='disableIt()' ng-disabled='disabledFlag' > Click to disable </button> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Example 2:
HTML
<!DOCTYPE HTML> <html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.disabledFlag1 = false; $scope.disableIt1 = function() { $scope.disabledFlag1 = true; }; $scope.disabledFlag2 = false; $scope.disableIt2 = function() { $scope.disabledFlag2 = true; }; $scope.disabledFlag3 = false; $scope.disableIt3 = function() { $scope.disabledFlag3 = true; }; $scope.disabledFlag = false; $scope.disableIt = function() { $scope.disabledFlag1 = true; $scope.disabledFlag2 = true; $scope.disabledFlag3 = true; }; }); </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <p> Disable the button in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <button ng-click='disableIt1()' ng-disabled='disabledFlag1' > disable it </button> <button ng-click='disableIt2()' ng-disabled='disabledFlag2' > disable it </button> <button ng-click='disableIt3()' ng-disabled='disabledFlag3' > disable it </button> <br> <br> <button ng-click='disableIt()' ng-disabled='disabledFlag' > disable All </button> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
