AngularJS v1.6.9中用ng-repeat为input:checkbox绑定ng-model

没问题，我来帮你搞定这个AngularJS的复选框遍历绑定需求！我们分两步来实现：先在控制器里准备好状态存储，再在视图里通过ng-repeat生成并绑定复选框。

步骤1：控制器中初始化选中状态存储 #

在你的AngularJS控制器里，新增一个对象用来追踪每个时间段的选中状态，和你现有代码放在一起就行：

// 初始化对象，存储每个时间段的选中状态
$scope.selectedTimeSlots = {};

// 你的现有代码
$scope.TimeSlotList = JSON.parse(localStorage.getItem("TimeSlots"));
console.log($scope.TimeSlotList);

步骤2：视图中用ng-repeat生成复选框 #

修改你的局部视图代码，通过ng-repeat遍历时间段列表，为每个项生成对应的复选框并绑定ng-model：

<div class="col-md-6">
  <div class="form_pad20">
    <label>Preferred Time Slots:</label>
    <!-- 遍历时间段列表，生成每个复选框项 -->
    <div ng-repeat="slot in TimeSlotList" style="margin-top: 8px;">
      <input 
        type="checkbox" 
        id="time-slot-{{slot.id}}" 
        ng-model="selectedTimeSlots[slot.id]"
        value="{{slot.time}}"
      >
      <label for="time-slot-{{slot.id}}">{{slot.time}}</label>
    </div>
  </div>
</div>

关键细节说明 #

• ng-repeat="slot in TimeSlotList"：遍历你从localStorage获取的时间段数组，每个循环项对应一个slot对象。
• ng-model="selectedTimeSlots[slot.id]"：把复选框的选中状态绑定到selectedTimeSlots对象的对应属性上——比如选中id为1的时间段时，selectedTimeSlots[1]会变为true，未选中则为false。这种对象属性绑定的方式比数组更灵活，能直接对应到每个时间段的唯一id。
• id和for关联：确保点击标签文字时也能切换复选框状态，提升用户交互体验。

额外：获取选中的时间段 #

如果后续需要拿到所有选中的时间段数据，可以在控制器里加一个方法：

$scope.getCheckedTimeSlots = function() {
  // 过滤出被选中的时间段数组
  return $scope.TimeSlotList.filter(function(slot) {
    return $scope.selectedTimeSlots[slot.id];
  });
};

调用这个方法就能得到包含所有选中时间段对象的数组啦！

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