如何使用 jquery 滑块过滤 ng-repeat 中的数据？答案

【问题标题】：How to filter data in ng-repeat using a jquery slider?如何使用 jquery 滑块过滤 ng-repeat 中的数据？
【发布时间】：2016-02-08 09:46:50
【问题描述】：

我正在使用 Ion.RangeSlider 这是一个 jquery 滑块。我有来自 http 的 json 数据，我使用 ng-repeat 指令在页面中显示它。我想使用如下所示的滑块过滤 JSON 数据

在图像下，您可以看到两个值 185;500，这是我将 ng-model 绑定到滑块时得到的值。

所以，我的问题是如何使用此滑块过滤我的数据？

编辑我更改了我正在使用的滑块并进行了相同的 CSS 更改，使其看起来像上面的滑块。 https://github.com/rzajac/angularjs-slider

【问题讨论】：

标签： javascript jquery json angularjs rangeslider

【解决方案1】：

以下是使用ng-repeat 和自定义过滤器的方法。只需使用您的绑定值并将它们替换为min 和max in 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;
  };
});

【讨论】：