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.
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element.
The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case of a string.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With