Question

我对AngularJs很新。我正在研究Q＆amp; A应用程序，我必须以表格的形式提出一些问题和答案。我有三种类型的问题，我必须以不同的方式呈现。每个问题都有一个分配的类型。如果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>

我试过这样的话。但我认为如果条件没有执行。因为如果条件为false或true，它会渲染每种情况下的所有元素。我是否以正确的方式使用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'">

希望有所帮助！

如果在angularjs模板中有条件

2 个答案: