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) descriptionI 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 descriptionI 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 descriptionI 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!
Thank you, really usefull for me :)
Angular is awesome!…. thanks for sharing this Tip – Sravan!….
Can you tell me how you created the facebook like popup in your website???? When I opened your page I saw the popup where you have only a like button?
We have used http://www.hellobar.com/?sid=173469&hbt=animated hope this helps