AngularJS Quiz App Tutorial (6/24) - Ng-click and ng-show directives

The writeup for this video:

Part 1 of this series:

The Git Repo for this project:

To move away from the list view and into the quiz view we need a button that can be clicked to trigger that transition. That is the first thing we need to do in this video. The button is created with some basic bootstrap markup and then a new angular directive will be used to trigger the functionality on the clicks.

The new directive in question is called ng-click and as an argument it accepts a function or statement that will be triggered every time the html element is clicked on.

With that button created we will need to figure out how to hide the list view and show the quiz view. The first part of tackling that will be to introduce some new angular directives called ng-show and ng-hide respectively.

ng-hide and ng-show take a conditional as an expression as an argument and will then either hide or show the html element depending on what the expression evaluates to (true or false).

Support Me On Patreon

One Off Donations:

Bitcoin: 39iDX27ZSkYtRhUrH5r5YN128wEjwDmSYp
Ethereum: 0x38b3cBF8Ee3EeeeA33D1925bA0ce0e90c8EcFD46
Horizen (ZEN): znanBCHpWJecBwZZmft9r5QzbzRX4nQn6Dz

Check Out The Site!

SUBSCRIBE!

Join the Community!

[paullopusushinsky]

So I've been going through these tutorials and I find it funny how you say you try to keep explanation on things to a minimum. You've explained concepts like the controller, filters, repeat etc. far better than any other Angular JS tutorials I've come across.

[nickeax]

Thank you for this whole series, it's great. Especially useful for learners is seeing a different way of connecting variables between controller and view. This gives us a valuable cross reference and a broader idea of what's going on. Thanks!

[pp]

great tutorials... Its really very easy to learn Angular by watching your series and coding simultaneously... thanks for posting these.. keep posting.. :)

[ghaedaj.murrar]

I thumps up to the videos before seeing it hhhh, amazing !

[TheMalni]

I enjoy these series so much and I'm learning a great deal with you! :D

[sojuthomas]

amazing tutorial series. i really enjoy watching your tutorials. and i can follow your steps easy as well. thanks for your good meandering. good work man.. keep sharing your knowledge. god bless.

[irtezaasad]

Great tutorial!! but i thing ngRoute would be a better practice in this particular case

[Skaxarrat]

I didn't had a problem until this one. When I click the 'Start Quiz' button, it hides everything correctly but one second after that, it shows everything again as if I didn't clicked "Start Quiz". Everything I had on the 'search' input, gets deleted, like a reset.