Question

我正在尝试在angularjs中构建多选题（MCQ）应用。我有以下数据。

var questions = [
            {
                questionId: 1,
                question: 'Can I build this app with angular',
                answer: 'yes',
                options: ['yes','no','depends','may be']
            },
            {
                questionId: 2,
                question: 'Is earth is flat',
                answer: 'no',
                options: ['yes','no','don\'t know']
            }
]

我的index.html看起来像这样

<div data-ng-repeat="question in questions">
    <p>question: {{ question.question }}</p>

    <div data-ng-repeat="option in question.options">
        <label data-ng-class="{correct-ans: answer[$parent.question.questionId][$index] == $parent.question.answer}">
            <input type="radio" data-ng-model="answer[$parent.question.questionId][$index]" name="{{ 'option'+$parent.question.questionId }}" value="{{ option }}"/>{{ option }}
        </label>
    </div>
</div>

当用户选择正确答案时，我想将css class correct-ans 应用于标签。上面的代码抛出 TypeError 无法将'some value'设置为undefined。然后我尝试定义$ scope变量 $ scope.answer = [[]，[]] ，但现在它只适用于第一个问题，之后再次出现TypeError。 Plz协助我如何做到这一点。提前谢谢。

Answer 1

出现类型错误，因为ng-model尝试将某些内容设置为$ scope.answer [questionId] [optionId]并获取未定义。当你定义$ scope.answer = [[]，[]]它只适用于第一个问题，因为它的questionId == 1，而$ scope.answer 1指的是第二个应答数组的元素（因为数组索引从0开始）。对于第二个问题，它试图访问不存在的$ scope.answer [2]。

我不确定你真的需要这里的二维数组 - 你需要的是存储用户为每个问题回答的内容，与有效答案进行比较并突出显示相应的选项（如果已选中）。我想建议改用这个代码：

//javascript
$scope.answer = [];
$scope.isCorrectAnswer = function(question, option) {
    return option == question.answer && $scope.answer[question.questionId] == option;
} 

//html
<div data-ng-repeat="option in question.options">
    <label data-ng-class="{'correct-ans': isCorrectAnswer(question, option)}">
        <input type="radio" data-ng-model="answer[question.questionId]" name="{{ 'option'+question.questionId }}" value="{{ option }}"/>{{ option }}
    </label>
</div>

这是jsfiddle。

Answer 2

我做了一个测试，似乎有效。 http://jsbin.com/bavaxurinu/1/edit?html,console,output

二维数组作为ng-模型

2 个答案: