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.

回答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>

回答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!