If else conditions in angularjs templates
Solution 1
What you're looking for is the ngSwitch
directive, which should be use when dealing with mutually exclusive conditions:
<td ng-switch="question.type">
<div ng-switch-when="MCQ">
<li>{[{question.question_text}]}</li>
<ol data-ng-repeat="answer in question.answers">
<li>
<input type="checkbox {[{answer.answer_text}]}</input>
</li>
</ol>
</div>
<div ng-switch-when="FIB">
<ol data-ng-repeat="answer in question.answers">
<li>
<input type="text"> </input>
</li>
</ol>
</div>
<div ng-switch-when="NUM">
<ol data-ng-repeat="answer in question.answers">
<li>
<input type="radio">{[{answer.text}]}</input>
</li>
</ol>
</div>
</td>
<td ng-if="quizdata.attempt_hint">
{[{question.hint}]}
</td>
Solution 2
If you're sure you want to use ngIf and not ngSwitch as @Blackhole referenced, I would just make sure that you're comparing the question.type to a string and not what is likely being interpreted as an object or some other variable by Angular.
For example, instead of:
<td ng-if="question.type==FIB">
Use:
<td ng-if="question.type == 'FIB'">
Hope that helps!
Sajid Ahmad
Updated on July 26, 2022Comments
-
Sajid Ahmad almost 2 years
I am quite new to AngularJs. I am working on a Q&A Application where i have to render some questions and its answers in the form of a table. I have three Types of questions which I have to render in a different way. Every question has a type assigned with it. If question.type is "MCQ" then the options or its answer should be rendered with HTML checkbox, and if question type is NUM its answers should be rendered with radio buttons. i tried this and use if conditions in AngularJs Template. my code is
<table> <thead> <td>Questions</td> <td></td> <td>Hints</td> </thead> <tr data-ng-repeat="question in quizdata.questions"> <td ng-if="question.type==MCQ"> <li>{[{question.question_text}]}</li> <ol data-ng-repeat="answer in question.answers"> <li> <input type="checkbox">{[{answer.answer_text}]}</input> </li> </ol> </td> <td ng-if="question.type==FIB"> <ol data-ng-repeat="answer in question.answers"> <li> <input type="text"> </input> </li> </ol> </td> <td ng-if="question.type==NUM"> <ol data-ng-repeat="answer in question.answers"> <li> <input type="radio">{[{answer.text}]}</input> </li> </ol> </td> <td></td> <td ng-if="quizdata.attempt_hint"> {[{question.hint}]} </td> </tr> </table>
I tried it like this. But I think if conditions are not executing. Because it is rendering all the elements in each case if the condition is false or true. Am I using the if conditions in right way? Is there any else condition in AngularJs Templates? Help will be highly appreciated.
-
Sajid Ahmad over 10 yearsJMDB, i tried this also . but it doesn't work . same it satisfy all the conditions
-
jmdb over 10 yearswhen you echo out question.type what does it give you?
-
Sajid Ahmad over 10 yearsThank you JMBD, it works, sorry it was my mistake, I was having some problem with ma logic. Its working fine now. Thanx
-
jmdb over 10 yearsno problem! happy to help. any upvotes/solved credits are appreciated!
-
Sajid Ahmad over 10 yearsBoth the solutions given by u guys are perfect . But i can accept only one answer, hahaha