Look in a different angle using Angular.js

Angular.js is a Superheroic JavaScript MVW Framework which really started drawing my attention recently. So I decided to give it a shot.

3 years ago, I wrote a blog post on jQuery to select grouped checkboxes and it took only a single line of code to achieve that. But we can achieve the same result without writing a single line of Javascript code. The reason for that is Angular.js allows to do two way data binding so in this case I’ve bound child checkboxes with the parent one by using a special angular directive ng-model and observing the states of checkboxes using ng-checked directive

ng-app>
  

    ng-model="parent" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"  type="checkbox"/> Select All

    ng-model="child_1" ng-checked="parent" type="checkbox"/> First

    ng-model="child_2" ng-checked="parent" type="checkbox"/> Second

    ng-model="child_3" ng-checked="parent" type="checkbox"/> Three

    ng-model="child_4" ng-checked="parent" type="checkbox"/> Four

    ng-model="child_5" ng-checked="parent" type="checkbox"/> Five

  
</div>​

ng-app directive tells angular to bootstrap the application, without such directive other directives will not work and simply be ignored.

Demo: http://jsfiddle.net/codef0rmer/4Mpq7/

Angular.js is really fascinating me and you can learn more about it on Angular.js Tutorial

If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.

Advertisement