As a beginner in AngularJs, I am currently developing a Q&A Application that requires rendering questions and their answers in a table format. The questions fall into three different types, each requiring a unique rendering style. Every question is associated with a type, such as "MCQ" for Multiple Choice Questions or "NUM" for numerical answers. When the question type is "MCQ," the options or answers should be displayed using HTML checkboxes, while for "NUM" questions, radio buttons should be used. I attempted to achieve this by utilizing if conditions within the AngularJs Template. Here is a snippet of my code:
<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>
While attempting this method, I encountered issues with the execution of if conditions. It seems that all elements are rendered regardless of whether the condition is true or false. Can anyone provide guidance on utilizing if conditions correctly in AngularJs Templates? Are there alternative conditions like an "else" statement available in AngularJs Templates? Any help would be greatly appreciated.