HTML DOM Binding with AngularJS

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 –

  1. There is a check-box field which says – ‘I agree to the terms and conditions’ – and a ‘Submit’ button.
  2. 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.
  3. 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.

HTML DOM Binding with AngularJS

Interesting? Let’s do it then.

Start fiddling with this example now

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.