Generate the dropdown options based on selected value of another dropdown

Question

I have created two dropdowns Opening hours & Closing Hours using ng-options, in angularJS. The drop-down options get populated by same array $scope.availableTimes

Below is the HTML code:

<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>

Below is the AngularJS script

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

As you can see both dropdown now has the list of times starts from 12:00 Midnight to 12: 00 Morning with 15 mins interval.

like this:

12:00 Morning
12:15 am
12:30 am
12:45 am
.....
.....
11:45 pm
12:00 Midnight

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.

Example:

If opening hours selected as 8:00 am Closing hours dropdown list will start from 8:15 am instead of 12:00 Morning.

Opening Hours
12:00 Morning
....
....
8:00 am (Selected)
8:15 am
8:30 am
....
12:00 Midnight

Closing hours
8:00 am
8:15 am
8:30 am
.......
.......
12:00 Midnight
12:15 am
12:30 am
.......
.......
7:45 am

I hope the example gives the idea what I'm trying to achieve. Any help will be appreciated.

Possible duplicate of [how to populate the end time in timepicker dropdown based on selected start time](https://stackoverflow.com/questions/48291124/how-to-populate-the-end-time-in-timepicker-dropdown-based-on-selected-start-time) — Ashish, May 22 '18 at 09:06
This is something similar I'm trying to achieve but How to fulfill this situation: Opening hour Sunday 11: 00am closing Hour 2:00 am — Raihan, May 22 '18 at 09:41

score 2 · Answer 1 · answered May 22 '18 at 08:53

I have updated your code.

use this files:

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>

This is awesome. Just one thing. If someone wanted to Select opening hours 10:00 am and Closing Hour 2:00 am it won't be possible because After midnight there are no options in the drop-down. How to solve this situation with this . — Raihan, May 22 '18 at 09:39
Can you help me with my new post? https://stackoverflow.com/questions/50553470/angularjs-call-directive-function-from-the-controller-on-page-load — Raihan, May 27 '18 at 19:27

score 1 · Accepted Answer · answered May 22 '18 at 09:45

Please check the link:https://plnkr.co/edit/I5R8NvdVHZk2t4dQMvyr?p=preview

I have updated your code

    <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];
  }
});

This is perfect. I guess if this can be converted into a directive it'll be better. any opinion? — Raihan, May 22 '18 at 09:54
Just wondering how it'll work if the opening hour & closing hour value is preselected with ng-model? Then closing hours will not follow the order — Raihan, May 22 '18 at 20:00
just call the same function where u are assigning value to ng-model variable. — Sravya Nagumalli, May 23 '18 at 09:24
Did you mean to call $scope.automaticallySelectClosingTime() ? — Raihan, May 23 '18 at 21:07
Yes.send the preselected open time value and you will get the closed time list — Sravya Nagumalli, May 25 '18 at 07:43
Can you help me how I can call this directive function to my controller? So that on page load Closing hours arrange accordingly? I've created a post for that : https://stackoverflow.com/questions/50553470/angularjs-call-directive-function-from-the-controller-on-page-load Plunker: https://plnkr.co/edit/8oxhWtdY7si8lAdOC7kP?p=preview — Raihan, May 27 '18 at 19:26

Generate the dropdown options based on selected value of another dropdown

2 Answers2