web-dev-qa-db-fra.com

Si sinon, conditions dans les modèles angularjs

Je suis assez nouveau pour AngularJs. Je travaille sur une application Q&R où je dois rendre quelques questions et leurs réponses sous forme de tableau. J'ai trois types de questions que je dois rendre d'une manière différente. Chaque question est associée à un type. Si question.type est "MCQ", les options ou sa réponse doivent être affichées avec la case à cocher HTML, et si le type de question est NUM, ses réponses doivent être affichées avec des boutons radio. j'ai essayé ceci et l'utilise si les conditions dans le modèle AngularJs. mon code est

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

Je l'ai essayé comme ça. Mais je pense que si les conditions ne sont pas réunies. Parce qu'il rend tous les éléments dans chaque cas si la condition est fausse ou vraie. Suis-je en utilisant les conditions if de la bonne manière? Existe-t-il une autre condition dans les modèles AngularJs? L'aide sera très appréciée.

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
12
Sajid Ahmad

Ce que vous recherchez est la directive ngSwitch , qui doit être utilisée lorsque vous traitez avec des conditions mutuellement exclusives:

<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>
23
Blackhole

Si vous êtes sûr de vouloir utiliser ngIf et non ngSwitch comme référencé @Blackhole, je m'assurerais simplement de comparer le question.type à une chaîne et non à ce qui est probablement interprété comme un objet ou une autre variable par Angulaire.

Par exemple, au lieu de:

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

Utilisation:

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

J'espère que cela pourra aider!

9
jmdb