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

Question

我使用的是一個jquery滑塊Ion.RangeSlider 。 我有通過http發送的json數據，我使用ng-repeat指令在頁面中顯示它。 我想使用下面的滑塊過濾JSON數據

在圖像下你可以看到兩個值185; 500 ，這是我將ng-model綁定到滑塊時得到的值。

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

編輯我改變了我正在使用的Slider並進行了相同的CSS更改，使其看起來像上面的滑塊。 https://github.com/rzajac/angularjs-slider

Answer 1

以下是使用ng-repeat和自定義過濾器的方法。 只需使用您的綁定值並將其替換為myfilter min和max ，如：

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