How to disable buttons using AngularJS ? - GeeksforGeeks

30 Sep, 2020
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="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>            <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="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>      <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.
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Calendar Component
How to bundle an Angular app for production?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property