AngularJS中如何实现开始时间联动结束时间下拉框选项

要实现选择开始时间后，结束时间仅显示晚15分钟及以后的选项，你可以借助AngularJS的过滤功能来实现，下面提供两种简单易行的方案：

方案一：使用自定义过滤函数（推荐，逻辑清晰） #

首先在你的控制器中添加一个过滤函数，用来判断哪些结束时间选项符合要求：

var app = angular.module('angularjs-starter', []); 
app.controller('MainCtrl', function($scope) { 
  $scope.availableTimes = []; 
  $scope.availableTimes.push({ 'msValue': 0, 'display': '12:00 Morning' }); 
  for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { 
    // 900000ms = 15分钟, 85500000ms = 11:45PM 
    $scope.availableTimes.push({ 
      'msValue': msValue, 
      'display': moment(msValue).utc().format("h:mm A") 
    }) 
  } 
  var dayMS = 86400000 - 1; 
  $scope.availableTimes.push({ 'msValue': dayMS, 'display': '12:00 Midnight' }); 

  // 添加自定义过滤函数
  $scope.filterEndTimes = function(time) {
    // 如果还没选择开始时间，显示所有选项
    if (!$scope.selectedFromTime) return true;
    // 只保留msValue大于开始时间的选项（即晚15分钟及以后）
    return time.msValue > $scope.selectedFromTime.msValue;
  }
});

然后修改结束时间下拉框的ng-options，加入这个过滤器：

<div class="row"> 
  <div class="col-md-6"> 
    <div class="form-group"> 
      <label for="exampleFormControlSelect1">Opening </label> 
      <select class="form-control" data-ng-options="time.display for time in availableTimes" data-ng-model="selectedFromTime"> 
      </select> 
    </div> 
  </div> 
  <div class="col-md-6"> 
    <div class="form-group"> 
      <label for="exampleFormControlSelect1">Closing</label> 
      <!-- 加入filter:filterEndTimes来过滤选项 -->
      <select class="form-control" data-ng-options="time.display for time in availableTimes | filter:filterEndTimes" data-ng-model="selectedToTime"> 
      </select> 
    </div> 
  </div> 
</div>

方案二：直接在ng-options中使用表达式过滤 #

如果你不想额外写函数，也可以直接在ng-options里用表达式实现过滤，省去控制器里的函数定义：

<div class="col-md-6"> 
  <div class="form-group"> 
    <label for="exampleFormControlSelect1">Closing</label> 
    <select class="form-control" 
            data-ng-options="time.display for time in availableTimes | filter:{msValue: '!' + (selectedFromTime ? selectedFromTime.msValue : '')}" 
            data-ng-model="selectedToTime"> 
    </select> 
  </div> 
</div>

原理说明 #

两种方案的核心逻辑都是：当selectedFromTime（选中的开始时间）发生变化时，自动过滤结束时间的选项，只保留msValue大于开始时间msValue的项——因为你生成时间时每一步间隔15分钟，所以大于当前时间的第一个选项正好是晚15分钟的时间，完美符合你的需求。

如果选中的是最后一个选项（12:00 Midnight），结束时间下拉框会变成空，这符合“晚15分钟”的逻辑；如果需要允许选中相同时间，可以把过滤条件改成time.msValue >= $scope.selectedFromTime.msValue。

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