AngularJS | ng-disabled Directive
The ng-disabled Directive in AngularJS is used to enable or disable 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 form field (input, select, button, etc).
Syntax:
<element ng-disabled="expression"> Contents... </element>
Example 1: This example uses ng-disabled Directive to disable the button.
html
<!DOCTYPE html> < html > < head > < title >ng-disabled Directive</ title > < script src = </ 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:
Before clicking the button:
After clicking the button:
Example 2: This example uses ng-disabled Directive to enable and disable button using checkbox.
html
<!DOCTYPE html> < html > < head > < title >ng-disabled Directive</ title > < script src = </ 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:
Before clicking the button:
After clicking the button:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari