Toggle or Show or Hide is pretty easy with AngularJS

Here is my first and simple example on AngularJS Framework – seriously I will forget jQuery soon :)

As I just started exploring more on this AngularJS since a week – I thought I would share my experience to other front-end developers out there. Here is my first and basic example to either SHOW or HIDE or TOGGLE the content, it’s even easy with jQuery thought – but if you want to achieve the same without jQuery then this is the best example for you.

Some how I feel AngularJS is pretty easy and it is using Native JavaScript. Last week I have given an introduction on AngularJS, you can check this post in case you missed it.

Here is the code to Toggle content:

Click here to Toggle (show/hide) description
I am description for the above title, which was collapsed by default

I have just used “collapsed” as per my convenience, you can even have your own custom name or for it and make sure you have the same for ng-model too.

and here is the code to SHOW the description:

Click here to SHOW description
I am description for the above title, which was collapsed by default

Here I have used “expandme” which I am setting it as Yes/True on click of link.

and here is code to HIDE the layer or content or description:

Click here to HIDE description
I am description for the above title, which was collapsed by default

I hope even this is pretty explanatory.

You can check the preview in JSFiddle at: http://jsfiddle.net/sravkum/EhTZW/

Hope this helped you – let me know if you are looking for any tips or tricks in AngularJS, I will try to address the same.

And look forward for more examples on AngularJS – Will keep you updated with simple tricks!