将时间 select 值过滤到 Angular 中最接近的 15 分钟

Question

所有。

我正在构建一个 Angular 应用程序，您可以在其中选择是否 select 一天中的时间以 5、7.5、10 或 15 分钟为间隔。因为这是利用 select 下拉菜单，如果间隔设置小于 15 分钟，它会创建很多很多选项。我想要做的是 select 以 15 分钟为增量的时间，然后使用向上和向下微调按钮按 selected 间隔增加时间 selection。

到目前为止，我已经添加了按钮并且它们工作正常。我现在需要做的就是过滤 selection 列表，这样它只会显示 15 分钟内的值，即 12:00、12:15、12:30、12:45.

我应该补充一点，如果间隔设置为 7.5 分钟块，时间格式如下：12:07:30

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

这是一个example

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.resetTime = function(){
    $scope.time = 12;
  }

  $scope.increaseTime = function(){
    $scope.time += $scope.interval/60;
  }

  $scope.decreaseTime = function(){
    $scope.time -= $scope.interval/60;
  }
});

app.filter('dateTime', function(){
  return function(input){
    if (input){
      var hours = Math.floor(input);
      input = (input - hours) * 60;
      var mins =  Math.floor(input);
      var secs = (input - mins) * 60;
      mins = (mins < 10 && mins > 0) ? '0' + mins : mins;
      return hours + ":" + mins;
    } else {
      return '';
    }
  }
})

并在您的标记中

<body ng-controller="MainCtrl">
  <select ng-model="interval" ng-change="resetTime()">
    <option value="5">5</option>
    <option value="7.5">7.5</option>
    <option value="10">10</option>
    <option value="15">15</option>
  </select>

  <hr/>

  <button ng-click="increaseTime();">Increase</button>
  <div>{{time | dateTime}}</div>
  <button ng-click="decreaseTime();">Decrease</button>
</body>

我没有添加 12:07:30，希望你可以自己添加

将时间 select 值过滤到 Angular 中最接近的 15 分钟

Filter time select values to nearest 15 minutes in Angular

angularjs

time

filter