Если еще условия в шаблонах angularjs

Question

Я довольно новичок в 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? Помощь будет высоко оценена.

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

Answer 2

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

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

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

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

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

Надежда, что помогает!