범위 사이의 AngularJS 필터링

Question

범위 슬라이더를 0 ~ 2 시간 범위로 설정하고 시간을 분 단위로 계산 한 다음 10 분, 20 분, 1 시간 20 분, 2 시간으로 hh : mm으로 변환합니다.

하지만 지금 범위 슬라이더로 지정된 범위를 사용하여 ng-repeat 내부의 항목을 필터링하려고하는데이 작업을 수행하는 데 어려움을 겪고 있습니다. 여기

내가 범위 슬라이더에 대한 http://danielcrisp.github.io/angular-rangeslider/demo/을 사용하고 http://cdpn.io/LDusa

을했을 것입니다. 내가 그래서이 작업을 얻을 수있는 방법

div(ng-app="myApp") 
    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='customFilter') 


    div(range-slider, prevent-equal-min-max='', attach-handle-values='', min='sliderConfig.min', max='sliderConfig.max', model-min='sliderConfig.userMin', model-max='sliderConfig.userMax', filter='customFilter') 

    div(ng-repeat="time in times | range:sliderConfig.userMin:sliderConfig.userMax") 
     | {{ item.time | customFilter }} 

:

var app = angular.module('myApp', ['ui-rangeSlider']); 
app.controller('myCtrl', function ($scope) { 
    $scope.sliderConfig = { 
     min: 0, 
     max: 120, 
     step: 10, 
     userMin: 0, 
     userMax: 30 
    }; 

    $scope.times = [ 
     {"time": "20"}, 
     {"time": "50"}, 
     {"time": "30"}, 
     {"time": "10"}, 
     {"time": "85"}, 
     {"time": "75"}, 
     {"time": "95"}, 
     {"time": "100"}, 
     {"time": "80"}, 
     {"time": "200"}, 
     {"time": "260"}, 
     {"time": "120"}, 
     {"time": "62"}, 
     {"time": "68"}, 
     {"time": "5"}, 
     {"time": "116"} 
    ]; 
}); 

app.filter('customFilter', 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; 
    }; 
}); 

app.filter('range', function() { 
    return function(input, min, max) { 
    min = parseInt(min); 
    max = parseInt(max); 
    for (var i=min; i<=max; i++) 
     input.push(i); 
    return input; 
    }; 
}); 

JADE (당신이 선호하는 HTML 경우 사용 HTML로 다시 변환 할 수 있습니다이 http://html2jade.org/) : 여기

그리고

코드입니다 time이 범위 슬라이더에 지정된 범위 내에있을 때만 항목을 표시합니까?

Answer 1

sliderConfig를 필터에 전달하여 범위 슬라이더에 현재 최소 및 최대 세트를 찾습니다. 개체가 배열에 있는지 확인하십시오.

<div range-slider="range-slider" 
     min="sliderConfig.min" 
     max="sliderConfig.max" 
     model-min="sliderConfig.userMin" 
     model-max="sliderConfig.userMax"> 
    </div> 
    ... 
    // Pass the slider config into the filter 
    <div ng-repeat="time in times | rangeFilter:sliderConfig"> 
     {{ time.time | customFilter}} 
    </div> 
    ... 
    $scope.times = [ 
     {time: '20'}, 
     {time: '50'}, 
     ... 
    ]; 

rangeFilter에는 2 개의 값을 가져올 수있는 두 번째 매개 변수 'rangeInfo'가 있습니다.

app.filter('rangeFilter', function() { 
    return function(items, rangeInfo) { 
     var filtered = []; 
     var min = parseInt(rangeInfo.userMin); 
     var max = parseInt(rangeInfo.userMax); 
     // If time is with the range 
     angular.forEach(items, function(item) { 
      if(item.time >= min && item.time <= max) { 
       filtered.push(item); 
      } 
     }); 
     return filtered; 
    }; 
}); 

희망이 있습니다.