Если остальные условия в шаблонах angularjs

Я новичок в AngularJs. Я работаю над Q & Приложение, в котором я должен отображать некоторые вопросы и ответы на них в виде таблицы. У меня есть три типа вопросов, которые я должен выполнять по-другому. Каждый вопрос имеет тип, назначенный ему. Если question.type является "MCQ", то параметры или его ответ должны отображаться с помощью HTML-флажка, а если тип вопроса - NUM, его ответы должны отображаться с помощью переключателей. Я попробовал это и использовал, если условия в шаблоне AngularJs. мой код

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

Я пробовал это так. Но я думаю, что если условия не выполняются. Потому что он отображает все элементы в каждом случае, если условие является ложным или истинным. Я правильно использую условия if? Есть ли еще условие в шаблонах AngularJs? Помощь будет высоко оценена.

Ответы

Ответ 1

Что вы ищете, это директива ngSwitch, которую следует использовать при работе с взаимоисключающими условиями:

<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

Если вы уверены, что хотите использовать ngIf, а не ngSwitch в качестве ссылки @Blackhole, я бы просто удостоверился, что вы сравниваете question.type с строкой, а не с тем, что, вероятно, интерпретируется как объект или другая переменная Angular.

Например, вместо:

<td ng-if="question.type==FIB">

Использование:

<td ng-if="question.type == 'FIB'">

Надеюсь, что это поможет!