Filtro angolareJS tra un intervallo

Question

Ho impostato un cursore di intervallo che va da 0 a 2 ore, i tempi sono calcolati in minuti e poi convertiti in hh: mm in questo modo: 10 min, 20 min, 1 ora 20 min, 2 ore.

Ma ora sto provando a filtrare un gruppo di elementi all'interno dello ng-repeat utilizzando l'intervallo specificato dal cursore dell'intervallo e sto avendo difficoltà a farlo funzionare.

Ecco quello che ho fatto http://cdpn.io/LDusa

Sto usando http://danielcrisp.github.io/angular-rangeslider/demo/ per il cursore gamma.

Ed ecco il codice:

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 (Se preferite HTML è possibile riconvertirlo in html utilizzando questo http://html2jade.org/):

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

Come posso ottenere questo lavoro in modo che visualizzerà gli articoli solo quando time si trova nell'intervallo specificato nel cursore dell'intervallo?

Answer 1

Passare lo sliderConfig nel filtro per trovare il minimo e il massimo correnti impostati sul cursore dell'intervallo. Assicurati che i tuoi oggetti siano in un array.

<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'}, 
     ... 
    ]; 

Il rangeFilter ha il secondo parametro 'rangeInfo', che siamo in grado di ottenere i 2 valori da.

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

Spero che sia d'aiuto.