0

私は angularjs プロジェクトに取り組んできましたが、解決できないように見える問題に直面しました。問題は、いくつかの試験を表す配列を持つコントローラーがあることです。

function ExamCtrl($scope) {
    $scope.exams = [{
        "title" : "Some fancy title",
        "owner" : "John Smith",
        "questions" : [
            {"type" : "openquestion", "question" : "Is cheese yummy?", "answer" : "Yes"},
            {"type" : "mcquestion", "question" : "Is cheese yummy?", "answers" : [{"a" : "Yes"}, {"b" : "No"}]}
        ]
    }];
}

ご覧のように、いくつかの質問オブジェクトを含む試験オブジェクトに配列があります。これらの各オブジェクトには、異なるスキーマ (openquestion、mcquestion など) があります。特定の質問タイプを持つ各オブジェクトが同じスキーマを持つことを保証できます。

私が直面している問題は、各質問タイプに属する正しい HTML をレンダリングすることです。angularjs Webページのチュートリアルでは、彼らが使用しています

<li ng-repeat="question in exams.questions>{{question.type}}</li>

このアプローチの問題点は、異なる質問タイプ間で違いを作ることができないことです。私はこの問題をディレクティブで解決しようとしており、コンパイルおよびリンク機能と激しく戦ってきましたが、良い解決策を見つけることができませんでした。

4

1 に答える 1

0

さて、ここに実用的なフィドルがあります

試験モデル構造に加えた大きな変更の 1 つは、「回答」を配列ではなく辞書オブジェクトにしたことです。実際に選択された回答は、すべての questionType のケースで question.answer に格納されています。

マークアップは少しトリッキーだと思います：

    <ul ng-repeat="exam in exams">
        <li ng-repeat="question in exam.questions">
            <p>{{question.question}}</p>
            <div ng-switch on="question.type" >
                <div ng-switch-when="openquestion">
                    <textarea ng-model="question.answer"></textarea>                        
                </div>
                <ul ng-switch-when="mcquestion">
                    <li ng-repeat="(key, value) in question.answers">
                        <label>
                        <input ng-model="$parent.question.answer" value="{{value}}" type="radio"/>
                            {{key}} ) {{value}}
                        </label>
                    </li>                        
                </ul>
              </div>
        </li>
    </ul>

そして、これがその背後にある JS です。

app.controller('MainCtrl', function($scope) {
   $scope.exams = [{
        "title" : "Some fancy title",
        "owner" : "John Smith",
        "questions" : [
            {"type" : "openquestion", "question" : "Is cheese yummy?", "answer" : "Yes"},
            {"type" : "mcquestion", "question" : "Is cheese yummy?", "answers" : { a: "Yes", b: "No" }, "answer" : "No"}
        ]
    }];
});

</p>

それが役立つことを願っています。

于 2012-12-04T22:02:13.343 に答える