如何在Angular JS的Rang滑块中设置时间? [英] How to set time in rang slider in angular js?

问题描述

我正在使用具有可拖动范围的Slider( https://jsfiddle.net/ValentinH/954eve2L/)在angular js中进行时间选择.我想在此滑块中设置时间.所以我的时钟是从00.00到24.00.但是我想以10分钟为间隔设置时间，例如00.10, 00.20, 00.30, 00.40, 00.50, 01.00, 01.10,01.10

I am using Slider with draggable range(https://jsfiddle.net/ValentinH/954eve2L/) in angular js for the time selection. I want to set time in this slider. So my clock is from 00.00 to 24.00. But I want to set time with 10 minutes interval, Like 00.10, 00.20, 00.30, 00.40, 00.50, 01.00, 01.10,01.10

<article>
  <h2>Slider with draggable range</h2>

  <rzslider rz-slider-model="slider_draggable_range.minValue" rz-slider-high="slider_draggable_range.maxValue" rz-slider-options="slider_draggable_range.options"></rzslider>
</article>

---

// Slider with draggable range
$scope.slider_draggable_range = {
  minValue: 1,
  maxValue: 8,
  options: {
    ceil: 10,
    floor: 0,
    draggableRange: true
  }
};

---

$scope.slider_draggable_range = {
  minValue: $scope.fromTime,
  maxValue: $scope.toTime,
  options: {
    ceil: 24,
    floor: 0,
    draggableRange: true,
    showTicks: true,
    hideLimitLabels: true,
    hourBase: function(value) {
      return (((value > 1 && value < 12) || value > 25) ? '0' : '') + (value + 22) % 24 + '00 hrs'
    },
    steps: pules()
  }
};

我无法发布完整的代码.因为这是不可能的.我正在按小时选择时间，例如10.00,11.00,12.00 ......但是现在我想从1.10、1.20、1.30开始计时.

I can't post my full code. Because it is not possible. I am selecting time by hour basis like 10.00,11.00,12.00......But right now I want to time from like 1.10, 1.20,1.30.

当我静态使用minValue: 4.40时，它将指向4，而当我设置4.60时，它将指向5，因此将其转换为整数值.不能得分.

When I used statically minValue: 4.40 then it will point 4 and when I set 4.60 then it will point to 5, So its convert into round figure value. Not in Points.

$scope.slider_draggable_range = {
  minValue: 4.40,
  maxValue: 7,
  options: {
    ceil: 24,
    floor: 0,
    draggableRange: true
  }
};

上限:24个上限，
地板:起点， minvalue:
的起点 响了 maxvalue:范围的终点终点

ceil:24 limit,
floor: starting point, minvalue:plote starting point for
rang, maxvalue:plote ending point for rang

请分享您的想法.这个问题对我来说很重要，您的回答很有价值.

Please share your idea. This question is very important for me and your answer valuable.

推荐答案

如果我理解正确，可以使用

If I understand you correctly, The thing you want, can achieved using the stepsArray option.

想法是使用选项自行设置选项.这样就可以将其设置为非整数.

The idea is to use the option to set the options by yourself. Thats way you can set it to non integer numbers.

(在 http://angular-slider.github中搜索演示Slider with Alphabet .io/angularjs-slider/)

(Search for the demo Slider with Alphabet in http://angular-slider.github.io/angularjs-slider/)

像这样(不是这样，只是一个例子):

Like this (Not the case, just an example):

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  var arr = getRange().map(n => {
    return {
      value: n,
      legend: n
    };
  });
  
  $scope.slider = {
    minValue: '10.50',
    maxValue: '14.20',
    options: {
      showTicks: true,
      stepsArray: arr
    }
  };
});

function getRange() {
  var arr = [];
  var d = new Date(2017, 1, 1);
  for (var i = 0; i < (6 * 24); i++) {
    d.setMinutes(d.getMinutes() + 10);
    arr.push(leadZero(d.getHours()) + '.' + leadZero(d.getMinutes()));
  }
  return arr;
}

function leadZero(time) {
  return time < 10 ? '0' + time : time;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #1f2636;
  font-size: 14px;
  padding-bottom: 40px;
}

header {
  background: #0db9f0;
  color: #fff;
  margin: -40px;
  margin-bottom: 40px;
  text-align: center;
  padding: 40px 0;
}

h1 {
  font-weight: 300;
}

h2 {
  margin-bottom: 10px;
}

.wrapper {
  background: #fff;
  padding: 40px;
}

article {
  margin-bottom: 10px;
}

.tab-pane {
  padding-top: 10px;
}

.field-title {
  width: 100px;
}

.vertical-sliders {
  margin: 0;
}

.vertical-sliders>div {
  height: 250px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="rzSliderDemo">
  <div ng-controller="MainCtrl" class="wrapper">
    <header>
      <h1>AngularJS Touch Slider</h1>

    </header>
    <article>
      <h2>Simple slider</h2>
      Model:
      <input type="text" ng-model="slider.minValue" />
      <input type="text" ng-model="slider.maxValue" />
      <br/>
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>

这篇关于如何在Angular JS的Rang滑块中设置时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！