0

我正在使用http://danielcrisp.github.io/angular-rangeslider/demo/创建一个范围滑块，但我希望它使用 time(HH:MM) 而不仅仅是普通数字。所以它的范围是10m - 2hr。但是我对如何实现这一点有点困惑。

我最好像这样格式化时间：

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

时间以分钟计算，然后也许我可以以某种方式使用日期过滤器将数字转换为 hh:mm 但我仍然希望它的格式类似于 (10min, 30min, 1hr, 1hr 10min, 1hr 30min, 2hr)

或者这是一种更好的方法：

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

还是我完全错过了这一点并且有更好的方法？

4

1 回答 1

3

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

<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;
    };
});

另请参阅这个简短的演示。

更新：

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

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>

另请参阅此更新的演示。

于 2014-05-18T16:47:10.010 回答