Question

我正在使用http://danielcrisp.github.io/angular-rangeslider/demo/来创建范围滑块，但我希望它使用时间（HH：MM）而不仅仅是普通数字。所以它的范围从10米到2小时不等。但是我对如何实现这一点感到有点困惑。

我会更好地格式化这样的时间：

$scope.minTime = 10;
$scope.maxTime = 120;

时间以分钟计算然后也许我可能以某种方式使用日期过滤器将数字转换为hh：mm但我仍然更喜欢它的格式是什么（10分钟，30分钟，1小时，1小时10分钟，1小时30分钟， 2小时）

或者这是更好的方法：

$scope.minTime = 00:10;
$scope.maxTime = 02:00;

或者我完全错过了这个并且有更好的方法吗？

Answer 1

最佳选项似乎是将值存储为分钟并使用自定义过滤器显示它们。

<div ng-controller="myCtrl">
    <div range-slider pin-handle="min" attach-handle-values
         prevent-equal-min-max step="{{sliderConfig.step}}"
         min="sliderConfig.min" max="sliderConfig.max"
         model-min="sliderConfig.userMin" model-max="sliderConfig.userMax" 
         filter="hourMinFilter">
    </div>
</div>

app.controller('myCtrl', function ($scope) {
    $scope.sliderConfig = {
        min:  0,
        max:  120,
        step: 10,
        userMin: 0,
        userMax: 30
    };
});

app.filter('hourMinFilter', function () {
    return function (value) {
        var h = parseInt(value / 60);
        var m = parseInt(value % 60);

        var hStr = (h > 0) ? h + 'hr'  : '';
        var mStr = (m > 0) ? m + 'min' : '';
        var glue = (hStr && mStr) ? ' ' : '';

        return hStr + glue + mStr;
    };
});

另请参阅此 short demo 。

<强>更新

修改后的版本，允许自定义过滤器最大值并显示不同的文字（按大众需求）：

1）扩展过滤器以接收第二个参数：最大限制。

...
return function (value, max) {
    if (value == max) { return 'All'; }

    var h = parseInt(value / 60);
    var m = parseInt(value % 60);
    ...

<子> 注意：使用==代替===非常重要，以便根据实际数字检查数字的字符串表示形式。如果要避免使用==，则应首先将两个参数都转换为String或Integer。

2）修改HTML以包含额外的过滤器参数：

<div range-slider pin-handle="min" attach-handle-values
     ....
     filter="hourMinFilter" filter-options="{{sliderConfig.max}}">
</div>

另请参阅此 updated demo 。

角度时间范围滑块

1 个答案: