AngularJS filtering between a range

Question

I have set up a range slider that ranges from 0 - 2hr, the times are calculated in mins then converted to hh:mm like this: 10min, 20min, 1hr 20min, 2hr.

But now I am

Answer 1

Pass the sliderConfig into the filter to find the current min and max set on the range slider. Make sure your objects are in an 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'},
      ...
    ];

The rangeFilter has the second parameter 'rangeInfo' which we can get the 2 values from.

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

Hope it helps.