根据另一个下拉列表的选定值生成下拉选项答案

【问题标题】：Generate the dropdown options based on selected value of another dropdown根据另一个下拉列表的选定值生成下拉选项
【发布时间】：2018-10-31 21:55:18
【问题描述】：

我在 angularJS 中使用 ng-options 创建了两个下拉列表Opening hours 和 Closing Hours。下拉选项由相同的数组填充$scope.availableTimes

以下是 HTML 代码：

<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>
         <select class="form-control" data-ng-options="time.display for time in availableTimes" data-ng-model="selectedToTime">
        </select>
      </div>
    </div>
  </div>

下面是 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) { // 90.000ms = 15 min, 85.500.000ms = 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'
  });

  console.log($scope.availableTimes);
});

Plunker

正如您所看到的，现在两个下拉列表都包含从午夜 12:00 到凌晨 12:00 的时间列表，间隔为 15 分钟。

像这样：

12:00 早上
上午 12 点 15 分
上午 12:30
上午 12 点 45 分
.....
.....
晚上 11 点 45 分
午夜 12:00

What I can do to make the Closing Hour drop-down options lists starts with the value that is 15 min greater than Opening hours.

例子：

如果开放时间选择为上午 8:00 关闭时间下拉列表将从上午 8:15 开始，而不是上午 12:00。

营业时间
12:00 上午
....
....
上午 8:00（已选择）
上午 8 点 15 分
上午 8 点 30 分
....
午夜 12:00

关闭时间
上午 8:00
上午 8 点 15 分
上午 8 点 30 分
.......
.......
12:00 午夜
上午 12 点 15 分
上午 12:30
.......
.......
早上 7 点 45 分

我希望这个例子能说明我想要达到的目标。任何帮助将不胜感激。

【问题讨论】：

how to populate the end time in timepicker dropdown based on selected start time的可能重复
这与我想要实现的类似，但如何实现这种情况：营业时间周日 11:00am 关闭时间 2:00am

标签： javascript angularjs

【解决方案1】：

我已经更新了你的代码。

使用这些文件：

app.js

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.availableTimes = [];
  $scope.selectedFromTime = {
    'msValue': 0,
    'display': '12:00 Morning'
  };

 $scope.availableTimes.push($scope.selectedFromTime);

  for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { // 90.000ms = 15 min, 85.500.000ms = 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.skipValues = function(value, index, array) {
    return value.msValue > $scope.selectedFromTime.msValue ;
};

  console.log($scope.availableTimes);
});

index.html

<!DOCTYPE html>
<html ng-app="angularjs-starter">

<head lang="en">
  <meta charset="utf-8" />
  <title>Custom Plunker</title>
  <script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/moment@2.14.1"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script src="pagination.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="exampleFormControlSelect1">Opening Hours</label>
        <select class="form-control" data-ng-options="time.display for time in availableTimes" data-ng-model="selectedFromTime" ng-change="automaticallySelectClosingTime()">
        </select>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="exampleFormControlSelect1">Closing Hours</label>
         <select class="form-control" data-ng-options="time.display for time in availableTimes | filter:skipValues" data-ng-model="selectedToTime">
        </select>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

这太棒了。就一件事。如果有人想选择上午 10:00 的营业时间和凌晨 2:00 的关闭时间，这是不可能的，因为在午夜之后，下拉菜单中没有任何选项。如何用这个来解决这种情况。
你能帮我写下我的新帖子吗？ stackoverflow.com/questions/50553470/…

【解决方案2】：

请查看链接：https://plnkr.co/edit/I5R8NvdVHZk2t4dQMvyr?p=preview

我已经更新了你的代码

    <head lang="en">
      <meta charset="utf-8" />
      <title>Custom Plunker</title>
      <script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/moment@2.14.1"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
      <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet" />
      <link rel="stylesheet" href="style.css" />
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>
      <script src="pagination.js"></script>
      <script src="app.js"></script>
    </head>

    <body ng-controller="MainCtrl">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label for="exampleFormControlSelect1">Opening Hours</label>
            <select class="form-control" data-ng-options="time.display for time in availableTimes" data-ng-model="selectedFromTime" ng-change="automaticallySelectClosingTime(selectedFromTime.msValue)">
            </select>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="exampleFormControlSelect1">Closing Hours</label>
             <select class="form-control" data-ng-options="time.display for time in closingTimes" data-ng-model="selectedToTime">
            </select>
          </div>
        </div>
      </div>
    </body>

    </html>

index.html

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.availableTimes = [];
  $scope.closingTimes = [];
  $scope.availableTimes.push({
    'msValue': 0,
    'display': '12:00 Morning'
  });
  for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { // 90.000ms = 15 min, 85.500.000ms = 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.closingTimes = $scope.availableTimes;
  console.log($scope.availableTimes);

  $scope.automaticallySelectClosingTime = function(msValue) {
    $scope.closingTimes = $scope.availableTimes;
    var remainingTimings = [];
    var index = $scope.closingTimes.map(function(obj){return obj.msValue;}).indexOf(msValue);
    index = (index === $scope.availableTimes.length-1) ? 1 : index+1;
    $scope.closingTimes = $scope.closingTimes.slice(index,$scope.availableTimes.length);
    if(msValue !== dayMS) {
      remainingTimings = $scope.availableTimes.slice(1,index -1);
    }
    $scope.closingTimes = $scope.closingTimes.concat(remainingTimings);
    $scope.selectedToTime = $scope.closingTimes[0];
  }
});

【讨论】：

这是完美的。我想如果这可以转换为指令会更好。有什么意见吗？
只是想知道如果使用 ng-model 预先选择了营业时间和关闭时间值，它将如何工作？那么关门时间将不按顺序进行
只需调用你为 ng-model 变量赋值的同一个函数。
你的意思是调用 $scope.automaticallySelectClosingTime() 吗？
是的。发送预选的开放时间值，您将得到关闭时间列表