测验应用中ng-checked指令在单选按钮的异常问题咨询

这种情况我之前开发类似测验应用时也碰到过，大概率是单选按钮的模型绑定与ng-checked的逻辑冲突导致的——尤其是当不同题目使用了相同选项值时，切换题目后Angular的状态检测没有正确识别变化，进而引发异常。下面给你几个具体的解决思路：

1. 给每个题目绑定独立的选中状态 #

不要使用全局的selectedOption变量来存储选择，而是给每个题目对象添加专属的selectedOption属性，确保不同题目的选择状态完全隔离。

比如原来的代码可能是这样（存在全局状态污染）：

<input type="radio" ng-model="selectedOption" value="A" ng-checked="selectedOption === 'A'">
<input type="radio" ng-model="selectedOption" value="B" ng-checked="selectedOption === 'B'">

改成每个题目独立存储状态：

<!-- 假设currentQuestion是当前展示的题目对象 -->
<input type="radio" ng-model="currentQuestion.selectedOption" value="A">
<input type="radio" ng-model="currentQuestion.selectedOption" value="B">

这样切换题目时，currentQuestion会切换到对应题目对象，其selectedOption属性是独立的，不会和其他题目冲突。

2. 移除冗余的ng-checked指令 #

在AngularJS中，ng-model已经可以自动控制单选按钮的选中状态，额外添加ng-checked反而容易引发状态冲突——尤其是当切换题目时，ng-checked的判断条件可能还停留在上一题的状态，和当前题目的ng-model值不一致。

如果需要展示用户的初始答案，只需要在切换题目时，把currentQuestion.selectedOption设置为用户之前保存的答案即可，ng-model会自动同步单选按钮的选中状态，完全不需要ng-checked来额外控制。

3. 优化问题面板的已答标记逻辑 #

确保问题面板的黄色标记是基于对应题目自身的selectedOption是否存在来判断，而非依赖全局状态：

<!-- questionList是所有题目的数组 -->
<div 
  class="question-block" 
  ng-repeat="question in questionList"
  ng-class="{answered: question.selectedOption}"
  ng-click="switchToQuestion($index)"
></div>

这样只要该题目有选中的选项，就会自动加上answered类显示黄色，状态判断更准确。

4. 确保切换题目时作用域状态正确更新 #

在返回上一题的按钮逻辑中，除了更新当前题目的索引，要确保currentQuestion正确指向对应题目对象。如果是在控制器中处理切换逻辑，尽量通过修改模型变量让Angular自动检测变化，避免手动操作DOM或状态：

$scope.goToPrevQuestion = function() {
  if ($scope.currentIndex > 0) {
    $scope.currentIndex--;
    $scope.currentQuestion = $scope.questionList[$scope.currentIndex];
    // 这里不需要额外的$apply，因为模型修改会自动触发脏检查
  }
};

按照上面的思路调整后，不同题目之间的选中状态就不会互相干扰，切换题目点击相同选项的异常应该就能解决了。

内容的提问来源于stack exchange，提问作者Rahul jhawar