如果 angularjs 模板中的其他条件 [英] If else conditions in angularjs templates

问题描述

我对 AngularJs 很陌生.我正在开发一个问答应用程序，我必须以表格的形式呈现一些问题及其答案.我必须以不同的方式呈现三种类型的问题.每个问题都有一个类型.如果 question.type 是MCQ"，那么选项或其答案应该用 HTML 复选框呈现，如果问题类型是 NUM，它的答案应该用单选按钮呈现.我试过这个并在 AngularJs 模板中使用 if 条件.我的代码是

<头><td>问题</td><td></td><td>提示</td></thead><tr data-ng-repeat="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></ol></td><td ng-if="question.type==FIB"><ol data-ng-repeat="answer in question.answers"><li><输入类型=文本"></input></ol></td><td ng-if="question.type==NUM"><ol data-ng-repeat="answer in question.answers"><li><input type="radio">{[{answer.text}]}</input></ol></td><td></td><td ng-if="quizdata.attempt_hint">{[{问题.提示}]}</td></tr>

我是这样试的.但我认为如果条件没有执行.因为如果条件为假或真，它会在每种情况下渲染所有元素.我是否以正确的方式使用 if 条件?AngularJs 模板中还有其他条件吗?非常感谢您的帮助.

解决方案

您正在寻找的是 ngSwitch 指令，在处理互斥条件时应该使用:

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

<div ng-switch-when="FIB"><ol data-ng-repeat="answer in question.answers"><li><输入类型=文本"></input></ol>

<div ng-switch-when="NUM"><ol data-ng-repeat="answer in question.answers"><li><input type="radio">{[{answer.text}]}</input></ol>

</td><td ng-if="quizdata.attempt_hint">{[{问题.提示}]}</td>

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.

解决方案

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 模板中的其他条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！