Skip to content
Related Articles

Related Articles

Improve Article

How to disable buttons using AngularJS ?

  • Last Updated : 30 Sep, 2020
Geek Week

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>

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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :