How to disable buttons using AngularJS ?

Last Updated : 01 Aug, 2022

In this article, we will see how to disable the button using the particular directive in AngularJS. Sometimes, we need to disable the button, and link on the click event. This task can be accomplished by implementing the ng-disabled directive that is used to enable or disable HTML elements.

Syntax:

<element ng-disabled="expression"> 
    Contents... 
</element>

Parameter value:

expression: It represents an expression that returns true if it sets the disabled attribute for the element.

This directive can be utilized to set the form field such as input, select, or textarea, with having the disabled attribute, i.e. it is supported by <input>, <select>, and <textarea> elements.

Example 1: This example illustrates the ng-disabled directive by disabling the button.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </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>
    <h3>
        Disable the button in AngularJS
    </h3>
    <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: This example illustrates the implementation of the ng-disabled directive to disable multiple buttons.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </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>
    <h3>
        Disable the button in AngularJS
    </h3>
    <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>