0

http://danielcrasp.github.io/angular-rangeslider/demo/を使用してレンジ スライダーを作成していますが、単純な数値だけでなく時間 (HH:MM) を使用したいと考えています。したがって、10m - 2hr の範囲になります。しかし、私はこれを達成する方法について少し混乱しています。

次のように時間をフォーマットしたほうがよいでしょうか。

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

時間は分単位で計算されるので、日付フィルターを使用して数値を hh:mm に変換することもできますが、(10 分、30 分、1 時間、1 時間 10 分、1 時間 30 分、2 時間)

または、これを行うより良い方法は次のとおりです。

$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)フィルターを拡張して、2 番目の引数である上限を受け取ります。

...
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 に答える