angularjs - 使用范围滑块设置时间

Question

我正在尝试使用离子范围来设置时间段，步长为 15 分钟。 离子范围的工作方式与具有最小值、最大值、步长、值的通用范围输入类似。

这是范围 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（分钟）的滑块，当它达到 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