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
.png)
