如何利用ng-repeat处理JSON文件，实现已预约时间按钮禁用功能？

我来帮你梳理一套可行的实现方案，一步步拆解需求，帮你搞定控制器和视图的代码问题：

第一步：先明确JSON数据结构 #

假设你的JSON文件（比如命名为timeSlots.json）是这样的结构，把「所有可选时段」和「已预约时段」分开存储，方便后续判断：

{
  "allTimeSlots": ["09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00"],
  "bookedSlots": ["10:00", "13:00"]
}

如果你的JSON结构不同，后面的代码可以根据实际字段名调整，核心是要区分开两个集合。

第二步：修复控制器逻辑 #

控制器需要完成两个核心动作：加载JSON数据，以及提供判断时段是否已预约的方法。这里用AngularJS的$http服务加载数据，同时把数据绑定到作用域：

angular.module('app', [])
.controller('TimeSlotController', function($scope, $http) {
  // 加载本地JSON文件（如果是后端接口，替换成接口地址即可）
  $http.get('timeSlots.json')
    .then(function(response) {
      // 将数据绑定到scope，供视图调用
      $scope.allTimeSlots = response.data.allTimeSlots;
      $scope.bookedSlots = response.data.bookedSlots;
    })
    .catch(function(error) {
      console.error('加载时间数据失败:', error);
    });

  // 判断当前时段是否已预约的工具方法
  $scope.isSlotBooked = function(timeSlot) {
    // 兼容旧浏览器的话，可用indexOf替代includes：$scope.bookedSlots.indexOf(timeSlot) !== -1
    return $scope.bookedSlots && $scope.bookedSlots.includes(timeSlot);
  };
});

常见控制器问题排查： #

• 别忘了注入$http服务，很多新手会漏掉这一步导致数据加载失败
• 确认JSON文件的路径正确，比如和HTML文件同目录，或者用正确的相对路径
• 如果你的AngularJS版本较老，includes方法不兼容的话，换成indexOf判断即可

第三步：用ng-repeat生成带禁用状态的按钮 #

在HTML视图里，通过ng-repeat遍历所有时段，再用ng-disabled绑定判断方法，自动禁用已预约的按钮：

<div ng-app="app" ng-controller="TimeSlotController">
  <h3>可选预约时段</h3>
  <button 
    ng-repeat="slot in allTimeSlots" 
    ng-disabled="isSlotBooked(slot)"
    class="time-slot-btn"
  >
    {{ slot }}
  </button>
</div>

视图代码说明： #

• ng-repeat="slot in allTimeSlots"：遍历所有时间段，每个slot对应一个按钮
• ng-disabled="isSlotBooked(slot)"：调用控制器的判断方法，返回true时自动禁用按钮
• {{ slot }}：渲染时间段文本

额外优化小技巧 #

可以给禁用的按钮加个CSS样式，让视觉上更直观：

.time-slot-btn:disabled {
  background-color: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  border: none;
}

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