In this article I will explain with an example, how to disable Button after Click using AngularJS.
This article will illustrate how to disable Button after Click using the ng-disabled directive in AngularJS.
 
 
Disable Button after Click using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML markup consists of an HTML Button. The HTML Button has been assigned ng-disabled directive. The value of ng-disabled directive has been set using the variable IsDisabled which is initially set to false and hence the HTML Button is enabled when page loads.
Note: If you want to learn more about ng-disabled directive, please refer my article ng-disabled directive example.
 
The Button is also assigned ng-click directive. When the Button is clicked, the ShowMessage function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
Inside the function, the value of the IsDisabled variable is set to true. This makes the HTML Button disabled when it is clicked and a JavaScript Alert Message Box is displayed.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert box.
 
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            //This will enable the Button by default.
            $scope.IsDisabled = false;
            $scope.ShowMessage = function () {
                //Disable the Button.
                $scope.IsDisabled = true;
 
                $window.alert("Button clicked.");
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" ng-disabled="IsDisabled" ng-click="ShowMessage()" value = "Click me" />
    </div>
</body>
</html>
 
 
Screenshot
Disable Button after Click using AngularJS
 
 
Demo
View Demo
 
 
Downloads
Download Code