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

Question

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

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

Итак, мои вопросы: как мне отфильтровать данные с помощью этого ползунка?

РЕДАКТИРОВАТЬ Я изменил Слайдер, который я использовал, и сделал те же 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;
  };
});