AngularJS实现嵌套repeat下答题选项点击添加bg-info类改背景

嘿，作为AngularJS初学者，遇到嵌套循环下的选中状态管理太正常了，我来一步步帮你实现点击选项添加bg-info类的功能！

第一步：设计带状态标记的数据结构 #

首先得给每个选项加个状态字段，用来跟踪它是否被选中。推荐的数据结构如下：

$scope.quizzes = [
  {
    id: 1,
    question: "这是第一题的题目内容？",
    options: [
      { id: 11, text: "选项A", isSelected: false },
      { id: 12, text: "选项B", isSelected: false },
      { id: 13, text: "选项C", isSelected: false }
    ]
  },
  {
    id: 2,
    question: "这是第二题的题目内容？",
    options: [
      { id: 21, text: "选项X", isSelected: false },
      { id: 22, text: "选项Y", isSelected: false },
      { id: 23, text: "选项Z", isSelected: false }
    ]
  }
];

每个选项里的isSelected布尔值，就是控制高亮类显示的核心开关。

第二步：嵌套ng-repeat+动态类渲染页面 #

用嵌套的ng-repeat渲染题目和选项，同时通过ng-class动态绑定bg-info类，再给选项绑定点击事件：

<div ng-repeat="quiz in quizzes" class="mb-4">
  <p>{{$index + 1}}) {{quiz.question}}</p>
  <div class="d-flex gap-3 mt-2">
    <span 
      ng-repeat="option in quiz.options"
      ng-click="toggleSelection(quiz, option)"
      ng-class="{'bg-info': option.isSelected, 'px-3': true, 'py-1': true, 'rounded': true, 'cursor-pointer': true}"
    >
      {{String.fromCharCode(97 + $index)}}) {{option.text}}
    </span>
  </div>
</div>

• 外层ng-repeat遍历题目，$index+1自动生成1)、2)这样的题目序号；
• 内层ng-repeat遍历当前题目的选项，String.fromCharCode(97+$index)生成a)、b)、c)的选项序号；
• ng-class里，当option.isSelected为true时自动添加bg-info类，后面的px-3、rounded是优化样式的辅助类（你可以根据需求调整）；
• ng-click绑定toggleSelection函数，传递当前题目和选项作为参数，方便后续处理选中逻辑。

第三步：实现选中状态控制逻辑 #

根据你的需求（单选/多选），选择对应的控制器函数：

场景1：单选（同一题目只能选一个选项）

点击选项时，先把当前题目的所有选项设为未选中，再标记点击的选项为选中：

$scope.toggleSelection = function(quiz, selectedOption) {
  // 清空当前题目的所有选中状态
  quiz.options.forEach(option => {
    option.isSelected = false;
  });
  // 标记当前点击的选项为选中
  selectedOption.isSelected = true;
};

场景2：多选（同一题目可选多个选项）

只需要切换当前点击选项的选中状态即可：

$scope.toggleSelection = function(selectedOption) {
  selectedOption.isSelected = !selectedOption.isSelected;
};

这种模式下，点击已选中的选项会取消高亮，点击未选中的会添加高亮。

小提示 #

如果你的项目没引入Bootstrap，bg-info类可能不会生效，你可以自己定义一个替代类：

.bg-info {
  background-color: #d1ecf1;
  color: #0c5460;
}

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