如何使用jQuery滑塊過濾ng-repeat中的數據？

Question

我正在使用Ion.RangeSlider這是一個jQuery的滑塊。 我有json數據是通過http來的，我使用ng-repeat指令將它顯示在頁面中。 我想用這個滑塊，看起來像下面

圖像下

你可以看到過濾JSON數據兩個值185; 500這是當我綁定NG-模型我得到的值到滑塊。

所以，我的問題是如何過濾我的數據使用這個滑塊？

編輯 我改變了我使用的Slider，並做了相同的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; 
    }; 
});