Question

我是刚接触过的角色，坚持，我希望这是一个相当容易的问题。

我有一个问题和几个答案。可能有1-3个正确的答案。可以通过复选框选择答案。在值字段中，如果答案正确（true）或错误（false），则保存。我正在跳跃，我可以简单地通过获得ng-valid和ng-invalid来使事情变得有效。例如。答案是错误的，当点击此答案的复选框时，anwswer文本应为红色（或某事）。取消选择它应该恢复正常。与正确答案相同。

这就是我目前的尝试方式：

<label ng-repeat="a in q.answers"><input type="checkbox" value="{{ a.correct }}" ng-pattern="true" ng-model="field.value"> {{ a.title }}</label>

因此，如果值为true，则应匹配模式＆＃39; true＆＃39;。不起作用，ng-pattern似乎没有任何效果。任何人都知道如何解决这个问题如果它比我想象的更复杂，我可能会用jquery进行检查。但我想首先尝试纯角度。

PS：我试图找到答案，但我找不到任何适合我问题的答案。

Answer 1

添加Jared Reeves的班级建议，这里有一种方法可以实现复选框答案：

<label ng-repeat="answer in question.answers" ng-class="{'invalid': answer.checked && !answer.correct, 'valid': answer.checked && answer.correct}">
  <input type="checkbox" ng-change="select(field, answer)" ng-model="answer.checked"> {{answer.title}}
</label>
Selected answer: {{field.value}}

// inside the controller

$scope.field = {
  value: null
};

$scope.question = {
  answers: [
    {title: "A (incorrect)", correct: false},
    {title: "B (incorrect)", correct: false},
    {title: "C (correct)",   correct: true},
    {title: "D (incorrect)", correct: false}
  ]
};

$scope.select = function(field, answer) {
  if (answer.checked) {
    field.value = answer;
  } else {
    field.value = null;
  }
};

以下是一个有效的例子：http://plnkr.co/edit/Qa2VrukMD61y8Jv4iKjx?p=preview

AngularJS复选框用于测验

1 个答案: