AngularJS Quiz App Tutorial (13/24) - ng-if Directive

The writeup for this video:

Part 1 of this series:

The Git Repo for this project:

As I briefly mentioned earlier in the series, we want to be able to display image based questions as well as questions with text. We have already taken care of the text based questions so now we can take a look at getting the image based questions sorted out.

In the JSON for each question it will let us know if the question is image or text based. We can create the markup to display the image from the URL given in the image questions. But then we want only the text markup or only the image markup to display depending on which type of question it is.

In other words, we do not want the text markup to display if it is an image question and vice versa.

Angular allows us to conditionally render markup using another directive called ng-if. Ng-if takes an expression and evaluates it. If it evaluates to true it will render that element out as normal but if it evaluates to false it will not even print that element on to the screen at all.

Support Me On Patreon

One Off Donations:

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

Check Out The Site!

SUBSCRIBE!

Join the Community!

[webprogramming]

great work :)....thank you very much... :)

[gagikmkrtchyan]

Turorial is very nice, do you have any other tutorials in youtube, or anywhere else ?

[hektik]

The images aren't equal height in the current chrome, they were fine in the current firefox.