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 Comment More infoAdvertise with us Next Article AngularJS ng-disabled Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-hide Directive The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: <element ng-hide="e 2 min read AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations. 4 min read AngularJS ng-mousedown Directive The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements. Syntax: <element ng-mousedown="expression"> Content 1 min read AngularJS ng-focus Directive The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements. Syntax: 1 min read Like