Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

If else conditions in angularjs templates

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.

like image 901
Sajid Ahmad Avatar asked Dec 01 '13 19:12

Sajid Ahmad


People also ask

Can we use * ngIf in AngularJS?

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.

What is Ngclass in AngularJS?

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.


1 Answers

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>
like image 93
Blackhole Avatar answered Oct 12 '22 01:10

Blackhole