AngularJS filtering between a range -

i have set range slider ranges 0 - 2hr, times calculated in mins converted hh:mm this: 10min, 20min, 1hr 20min, 2hr.

but trying filter bunch of items inside ng-repeat using range specified range slider , having hard time getting working.

here have done http://cdpn.io/ldusa

i using http://danielcrisp.github.io/angular-rangeslider/demo/ range slider.

and here code:

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);     (var i=min; i<=max; i++)       input.push(i);     return input;   }; }); 

jade(if prefer html can convert html using 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 }} 

how can working display items when time within range specified in range slider?

pass sliderconfig filter find current min , max set on range slider. make sure objects in array.

    <div range-slider="range-slider"           min="sliderconfig.min"           max="sliderconfig.max"           model-min="sliderconfig.usermin"           model-max="sliderconfig.usermax">     </div>     ...     // pass slider config filter     <div ng-repeat="time in times | rangefilter:sliderconfig">         {{ time.time | customfilter}}     </div>     ...     $scope.times = [       {time: '20'},       {time: '50'},       ...     ]; 

the rangefilter has second parameter 'rangeinfo' can 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 range         angular.foreach(items, function(item) {             if( item.time >= min && item.time <= max ) {                 filtered.push(item);             }         });         return filtered;     }; }); 

hope helps.