Open In App

AngularJS ng-disabled Directive

Last Updated : 01 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will see the AngularJS ng-disabled Directive, along with understanding its implementation through the illustrations.

The ng-disabled Directive in AngularJS is used to enable or disable the HTML elements. If the expression inside the ng-disabled attribute returns true then the form field will be disabled or vice versa. It is usually applied on the form field (i.e, input, select, button, etc). The value of the disabled attribute can't be set to false, that in turn, disabled the elements, regardless of their value, in the presence of the disabled attribute in HTML.

Syntax:  

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

Example 1: This example uses the ng-disabled Directive to disable the button.  

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>ng-disabled Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="app" 
      style="text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>ng-disabled Directive</h2>
    <div ng-controller="app" 
         ng-init="disable=false">
        <button ng-click="geek(disable)" 
                ng-disabled="disable"> 
            Click to Disable 
        </button>
        <button ng-click="geek(disable)" 
                ng-show="disable">
            Click to Enable
        </button>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('app', ['$scope', function($app) {
            $app.geek = function(disable) {
                $app.disable = !disable;
            }
        }]);
    </script>
</body>
</html>

Output:

ng-disabled Directive

Example 2: This example implements the ng-disabled Directive to enable and disable buttons using the checkbox.  

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>ng-disabled Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="app" 
      style="text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>ng-disabled Directive</h2>
    <div ng-controller="geek">
        <h4>
            Check it 
            <input type="checkbox" 
                   ng-model="check" />
        </h4>
        <button type="button" 
                ng-disabled="!(check)">
            Click to submit 
        </button>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function($scope) {
            $scope.disableClick = function(isDisabled) {
                $scope.isDisabled = !isDisabled;
            }
        }]);
    </script>
</body>
</html>

Output:

ng-disabled Directive with Checkbox

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox