如何在select表单式时间选择器中添加time+15min选项？

要实现这个需求，你可以借助JavaScript的Date对象计算当前时间加15分钟后的结果，再结合AngularJS的日期过滤器格式化显示。下面提供两种实用的实现方式：

方式一：控制器中处理逻辑（推荐） #

把时间计算逻辑放在控制器里，让模板只负责展示内容，更符合AngularJS的MVC设计模式，代码也更易维护：

1. 在你的AngularJS控制器中，添加计算+15分钟时间的代码：

// 假设你已经初始化了当前时间到$scope.date
$scope.date = new Date();

// 生成当前时间+15分钟的日期对象
$scope.datePlus15 = new Date($scope.date);
$scope.datePlus15.setMinutes($scope.datePlus15.getMinutes() + 15);

2. 在模板的select中新增对应的选项：

<select id="inputState" class="oke" ng-model="reservation.time">
  <option selected>{{date | date:'HH:mm'}}</option>
  <option>{{datePlus15 | date:'HH:mm'}}</option>
</select>

方式二：直接在模板中计算（快速实现） #

如果是简单场景，也可以直接在模板里通过表达式完成计算（复杂场景不推荐，会让模板逻辑过重）：

<select id="inputState" class="oke" ng-model="reservation.time">
  <option selected>{{date | date:'HH:mm'}}</option>
  <!-- 15*60*1000 是将15分钟转换为毫秒数，加到原时间戳上 -->
  <option>{{new Date(date.getTime() + 15*60*1000) | date:'HH:mm'}}</option>
</select>

额外提示：实时更新时间 #

如果你的date需要动态刷新（比如实时显示当前时间），可以用$interval定时更新时间值：

// 每分钟更新一次当前时间和+15分钟的时间
$interval(function() {
  $scope.date = new Date();
  $scope.datePlus15 = new Date($scope.date);
  $scope.datePlus15.setMinutes($scope.datePlus15.getMinutes() + 15);
}, 60000);

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