Как фильтровать данные в ng-repeat с помощью ползунка jquery?

Question

Я использую Ion.RangeSlider, который является слайдером jquery. У меня есть данные json, которые проходят через http, и я показываю его на странице, используя директиву ng-repeat. Я хочу, чтобы фильтровать данные в формате JSON с помощью ползунка, который выглядит, как показано ниже

под изображением вы можете увидеть два значения 185; 500, что это значение я получаю, когда я связать нг-модель к ползунку.

так, мои вопросы - как мне фильтровать свои данные, используя этот слайдер?

EDIT Я изменил слайдер, который я использовал, и сделал те же изменения CSS, чтобы он выглядел как этот слайдер. https://github.com/rzajac/angularjs-slider

Answer 1

Вот как вы можете это сделать с помощью ng-repeat и настраиваемого фильтра. Просто используйте свой переплетены значение и заменить их min и max в myfilter как:

<div ng-repeat="item in items | myfilter: { min: slider.min, max: slider.max }"> 

JSFiddle

HTML:

<div ng-app="app" ng-controller="dummy"> 
    <div ng-repeat="item in items | myfilter: { min: 185, max: 500 }"> 
     <p>{{item.name}}</p> 
    </div> 
</div> 

JS:

var app = angular.module("app", []); 
app.controller('dummy', function($scope, $sce) { 
    $scope.items = [{name: 'hello', cost: 100}, {name: 'world', cost: 200}] 
}); 
app.filter('myfilter', function() { 
    return function(items, condition) { 
    var filtered = []; 

    if(condition === undefined || condition === ''){ 
     return items; 
    } 

    angular.forEach(items, function(item) {   
     if(item.cost >= condition.min && item.cost <= condition.max){ 
     filtered.push(item); 
     } 
    }); 

    return filtered; 
    }; 
});