Question

我一直致力于一个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网页上的教程中，他们使用

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

这种方法的问题在于我不能在不同的问题类型之间做出区分。我一直试图用指令来解决这个问题，并且一直在与编译和链接函数进行大量斗争，但是还没有找到一个好的解决方案。

Answer 1

好吧，here is a working fiddle

我对你的考试模型结构做出的一个更大的改变是我将“答案”作为一个字典对象而不是一个数组，并且我在所有的questionType案例中都存储了实际选择的答案./ / p >

我猜这个标记有点棘手：

    <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"}
        ]
    }];
});

我希望有所帮助。

AngularJS模型数组中的不同模型模式

1 个答案: