问

如果在angularjs模板中有条件

zg18156zg你发布于 2023-02-13 15:38

我对AngularJs很新.我正在制作一个Q&A应用程序,我必须以表格的形式提出一些问题和答案.我有三种类型的问题,我必须以不同的方式呈现.每个问题都有一个分配的类型.如果question.type是"MCQ",则选项或其答案应使用HTML复选框呈现,如果问题类型为NUM,则应使用单选按钮呈现其答案.我试过这个并使用AngularJs模板中的条件.我的代码是


    
        Questions
        
        Hints
    
    
        
            {[{question.question_text}]}
            
                
                    {[{answer.answer_text}]} 
                
            
        

        
            
                
                     
                
            
        

        
            
                
                    {[{answer.text}]}
                
            
        

        

        
            {[{question.hint}]}

Questions		Hints
{[{question.question_text}]} {[{answer.answer_text}]}		{[{answer.text}]}		{[{question.hint}]}

我试过这样的.但我认为如果条件没有执行.因为如果条件为false或true,它会渲染每种情况下的所有元素.我是否以正确的方式使用if条件？AngularJs模板中还有其他条件吗？帮助将受到高度赞赏.

2 个回答

如果您确定要使用ngIf而不是ngSwitch作为@Blackhole引用,我只是确保您将question.type与字符串进行比较,而不是将可能被解释为对象或其他变量的内容.角.

例如,而不是:
```
<td ng-if="question.type==FIB">
```
使用:
```
<td ng-if="question.type == 'FIB'">
```
希望有所帮助!
2023-02-13 15:41 回答

咾爺們

您正在寻找的是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>

2023-02-13 15:41 回答

Rockets马丁

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签