ng-Disabled Directive in AngularJS

Nitin
8y
4.1k
0
0
25
Blog

ng- disabled directive is used to enable or disable HTML elements. Let us see this with the help of an example.

Write the following HTML mark up in the webpage.

<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="Switch=true">
<p>
<input type="checkbox" ng-model="Switch"/>
</p>
<p>
<button ng-disabled="Switch">Submit</button>
</p>
</div>
</body>
</html>

In the above example we have a checkbox and a button. If the checkbox is selected the button is disabled, but if we uncheck the checkbox then the button is enabled.

So let us check the output of the program.

output