EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS ng-disabled
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJS ng-disabled

By Kinjal LodhaKinjal Lodha

AngularJS ng-disabled

Definition of AngularJS ng-disabled

AngularJS ng-disabled is an In-Built AngularJS directive that is used in the HTML view for disabling HTML elements such as input, select, button, etc. on a conditional basis by evaluating the expression defined in the ng-disabled directive. This directive comes into usage whenever the developer needs to add a disabled attribute in the HTML element but on some conditional basis or based on some criteria. If the expression inside ng-disabled evaluates to be TRUE then disabled attribute is added to that HTML element and if not then nothing is added. This can be used with HTML tag such as button, select, input, div, span, etc.

Syntax of AngularJS ng-disabled

There are various ways to write ng-disabled directive with different HTML Tags.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,198 ratings)
  • Using ng-disabled with Input Type

<input type=”checkbox” ng-disabled=”conditionalDisabling” ng-model=”modelValue”></input>

  • Using ng-disabled with Select Type

<select ng-disabled=”conditionalDisabling” ng-options=”reason as reason.desc for reason in reasonsList”></select>

  • Using ng-disabled with Button Type

<button ng-model=”modelValue” type=”text” ng-disabled=” conditionalDisabling”>

  • Using ng-disabled with div/span

<div ng-disabled=”conditionalDisabling” ng-click=”onClickOperation”> Update Request </div?

an ng-disabled directive can be used with multiple HTML element and can be used conditionally

How ng-disabled Directive Works in AngularJS?

In the AngularJS framework, it is very important to know that all the In-Built directive which have been provisioned by the AngularJS framework will always be denoted with ng prefix.

The ng-disabled directive is very simple and very easy to use the directive in the HTML view. This directive is used to disable any particular HTML element on the view based on conditional evaluation of the expression defined inside the ng-disabled directive. The way ng-disabled directive works are as soon as the HTML view come across ng-disabled directive declared in HTML elements, it evaluates the expression and if the value returned is TRUE then the disabled attribute is added to the same HTML element which disables that element. The ng-disabled attribute directive accepts any conditional binary or ternary expression as the value as well as it accepts any method call which is defined inside the controller and the controller can handle as per requirements and return a Boolean response. This ng-disabled directive can be used with select type, textarea, input types with checkbox, submit, div or span as well as with button HTML tags.

Using ng-disabled directive when the model value changes and expression inside ng-disabled uses model value then ng-disabled will get executed and update the disabled attribute accordingly Ng-disabled directive is executed at priority level 100 and as disabled attribute has few limitations as well in terms of interpolation that’s the reason ng-disabled came into the picture.

Examples of AngularJS ng-disabled

Following are the examples as given below:

Example #1

Using ng-disabled with input type

 Index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="disablingApp" ng-controller="disablingCtrl">
<h2>Billing Portal</h2>
<input type="checkbox" ng-model="mainCheckbox">Get the invoice details !!</input> <br> <br>
<input type="checkbox" ng-model="printCheckBox" ng-disabled="!mainCheckbox"> Print Bill </input>  <br>
<input type="checkbox" ng-model="emailCardCheckBox" ng-disabled="!mainCheckbox"> Email Bill </input>
</body>
</html>

Script.js

var app = angular.module('disablingApp', []);
app.controller('disablingCtrl', function($scope) {
});

Above example shows how easily the ng-disabled directive can be used in AngularJS HTML view and tweaked around conditions as the developer wants to. This is an example of a Billing Portal where the user can select multiple options in order to receive the invoice details. The requirement is If the Use selects the option to receive Invoice details then the only User should be allowed to Select the mode of invoice bill i.e. does the user needs the bill of invoice or email of invoice or both. When the Get Invoice details option is not selected at that time we want the print and email checkboxes to be disabled. As soon as the Get Invoice details option is selected we want the Print and email checkbox to be enabled. As the model value will change the ng-disabled will get updated and will enable or disable the checkbox accordingly.

<input type="checkbox" ng-model="mainCheckbox">

Here simply a checkbox is added with ng-model.

<input type="checkbox" ng-model="printCheckBox" ng-disabled="!mainCheckbox">

Here we are adding the ng-disabled attribute which will be executed conditionally based on the model value of mainCheckbox. The model value mainCheckbox will get updated whenever the checkbox is selected or deselected.

Output:

Print and Email checkbox is disabled

AngularJS ng-disabled-1.1

Print and Email are enabled

AngularJS ng-disabled-1.2

Example #2

 Index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="disablingApp" ng-controller="disablingCtrl">
<input type="checkbox" ng-model="allOptions">Select Checkbox to disable dropdown and button <br><br>
<select ng-options="color.key for color in colors" ng-model="selectedColor"
ng-disabled="allOptions">
</select><br><br>
<input type="submit" ng-disabled="allOptions"/>
</div>
</body>
</html>

Script.js

// Code goes here
var app = angular.module('disablingApp', []);
app.controller('disablingCtrl', function($scope) {
$scope.colors = [
{'key': 'Black', 'value': 'black'},
{'key': 'Red', 'value': 'red'},
{'key': 'Blue', 'value': 'blue'},
{'key': 'Light blue', 'value': 'cyan'},
{'key': 'Green', 'value': 'green'}];
});

Above example everything is same as above except that the ng-disabled is being now used to disable other fields based on its ng-model value and evaluation to TRUE or FALSE. As soon as the Checkbox is selected to disable all input fields on the HTML view this will disable all elements which have ng-disabled attribute added and who evaluation goes to true. This will add disabled attribute and will disable the fields.

Another Example for ng-disabled is to use ternary operators. Yes you heard it right, ng-disabled works perfectly if used with ternary operators in HTML view.

<input type="checkbox" ng-model="allOptions">

Here simply a checkbox is added with ng-model allOptions.

ng-disabled="allOptions"

Using conditions based on whether all options is selected or not and then disabling the dropdown and submit button.

Output:

When disable all checkbox is not selected

AngularJS ng-disabled-2.1

When checkbox is selected

AngularJS ng-disabled-2.2

Conclusion

ng-disabled is a directive in AngularJS which is mainly used to disable HTML elements in HTML view based on certain conditions. an ng-disabled directive is an In-Built AngularJS directive. There are various different forms of using this directive and proper syntax is all that is needed and you are ready to go.

Recommended Articles

This is a guide to AngularJS ng-disabled. Here we also discuss the definition and how ng-disabled directive works in angularjs? along with different examples and its code implementation. You may also have a look at the following articles to learn more –

  1. AngularJS Custom Filter
  2. AngularJS Currency Filter
  3. AngularJS Validation
  4. AngularJS Filters
Popular Course in this category
Angular JS Training Program (9 Courses, 7 Projects)
  9 Online Courses |  7 Hands-on Projects |  64+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more