如果angularjs模板else条件 [英] If else conditions in angularjs templates

问题描述

我很新的AngularJs。我工作的一个Q＆放大器;其中我有一个应用程序呈现在表格的形式，一些问题及其答案。我有，我有不同的方式来呈现问题的三种类型。每一个问题都有一个指定的一个类型。如果question.type是MCQ，那么选项或其答案应该是用HTML渲染复选框，如果问题类型是NUM的答案应与单选按钮来呈现。我想这一点，如果在AngularJs模板条件下使用。我的code是

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>

我试过这样。但我认为，如果条件得不到执行。因为它是呈现在每种情况下的所有元素，如果条件为假或真。我使用在正确的方式，如果条件？是否有AngularJs模板任何其他条件？帮助将是非常美联社preciated。

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.

推荐答案

什么你要找的是 ngSwitch 指令，互相排斥的条件打交道时，这应该是使用：

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>

这篇关于如果angularjs模板else条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！