web-dev-qa-db-ja.com

他の場合、angularjsテンプレートの条件

私はAngularJsを初めて使用します。質問とその回答を表形式で表示する必要があるQ＆Aアプリケーションに取り組んでいます。別の方法でレンダリングする必要のある3種類の質問があります。すべての質問にはタイプが割り当てられています。 question.typeが「MCQ」の場合、オプションまたはその回答はHTMLチェックボックスでレンダリングされ、質問タイプがNUMの場合、回答はラジオボタンでレンダリングされる必要があります。私はこれを試し、AngularJsテンプレートのif条件を使用しました。私のコードは

<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テンプレートに他の条件はありますか？ヘルプは大歓迎です。

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

探しているのは 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>
23
Blackhole

参照されている@BlackholeとしてngSwitchではなくngIfを使用したい場合は、question.typeを文字列と比較し、オブジェクトまたは他の変数として解釈される可能性のあるものではないことを確認するだけです角度。

たとえば、次の代わりに：

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

使用する：

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

お役に立てば幸いです！

9
jmdb