각도 시간 범위 슬라이더

Question

http://danielcrisp.github.io/angular-rangeslider/demo/을 사용하여 범위 슬라이더를 만들었지 만 일반 숫자가 아닌 시간 (HH : MM)을 사용하고 싶습니다. 그래서 그것은 10m - 2hr의 범위 일 것입니다. 그러나 나는 이것을 달성하는 방법에 대해 약간 혼란 스럽다.

은이 같은 시간의 서식을 더 잘 될 것이다 :

시간은 아마도 어떻게 든 어쩌면 HH로 숫자를 변환 날짜 필터를 사용하여 수 분에서 계산됩니다

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

: 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.

---

UPDATE :

수정 된 버전이 사용자 지정 필터의 최대 값을 허용하고 (호평) 다른 문자가 표시하려면

1)받을 필터 확장 두 번째 인수 : 최대 한도.

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

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

_{주 : == 대신 ===의 사용은 실제 숫자에 숫자의 문자열 표현을 확인하기 위해 매우 중요합니다. ==을 사용하지 않으려면 먼저 두 인수를 모두 String 또는 Integer로 변환해야합니다.}

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

참조, 또한,이 updated demo :

2)는 별도의 필터 인수를 포함하는 HTML을 수정합니다.