javascript - angularjs - 使用范围 slider 设置时间

Question

我正在尝试使用 ionic 范围来设置一个时间段，步长为 15 分钟。 ionic 范围的工作方式就像带有最小值、最大值、步长、值的常见范围输入。

这是范围 html 代码:

<div class="item range">
  <input type="range" min="0.15" max="12" value="0" step="0.15" ng-model="TimeValue" ng-change="setTime(TimeValue)">
</div>

这是我在更改时调用的函数:

$scope.setTime = (value) ->
   $scope.hours = Math.floor(value / 0.6);
   $scope.minutes = value - ($scope.hours * 0.6);

不幸的是，这不起作用。

我想要实现的是一个步长为 0.15(分钟)的 slider ，当它达到 0.6 时自动创建一个小时，然后在 1.15(小时)处再次开始，依此类推。

我在这里关注这个答案:using ionic range to set months and years但这是几年和几个月的时间，计算方法也不同。

这是一个快速演示:http://codepen.io/anon/pen/eZVPRv?editors=1010

编辑

新演示:http://codepen.io/anon/pen/eZVPRv?editors=1010

Answer 1

使用下面的代码伙计，希望这是你所需要的-

angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', ['$scope', function($scope){    
  $scope.setTime = function (value) {
    $scope.hours = Math.floor(value / 0.6);
  if(($scope.TimeValue % 0.6) == 0 ){
    $scope.minutes = 0;
    }else{
      if($scope.TimeValue <= .6){
        $scope.minutes = Math.round((value - ($scope.hours))*100);  
      }else{
        value = Math.round((value - ($scope.hours * .6))*100);
        $scope.minutes = value;
      }
    }
  }
  $scope.TimeValue = 0.15;
}])

计算出现问题，请在此处检查- http://codepen.io/himanshuapril1/pen/eZVPXe?editors=1010