There are several AngularJS directives that are used to bind the application data to attributes of HTML DOM elements, such as ng-disabled, ng-show, ng-hide and ng-click. In the example below we have tried using some of the directives for a better understanding.
So now as an example, let’s create a very simple application, where –
- There is a check-box field which says – ‘I agree to the terms and conditions’ – and a ‘Submit’ button.
- When this checkbox is checked, there appears another checkbox field, which says – ‘Are you sure to do this?’. So unless this checkbox field is checked, the submit button won’t get enabled.
- Note that the first checkbox gets disabled as soon as the second checkbox gets checked, and at the same time the submit button gets enabled.
This means that for the submit button to be enabled, both the first and second checkbox must be checked.
Interesting? Let’s do it then.
<div ng-app="" ng-init="agree=false;sure=false;">
<p><input type="checkbox" ng-model="agree" ng-disabled="sure" />I agree to the terms and conditions</p>
<p ng-show="agree"><input type="checkbox" ng-model="sure" />Are you sure?</p>
Start fiddling with this example now