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

Posted

技术标签:

【中文标题】如何使用 jquery 滑块过滤 ng-repeat 中的数据?【英文标题】:How to filter data in ng-repeat using a jquery slider? 【发布时间】: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

【问题讨论】:

【参考方案1】:

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

【讨论】:

以上是关于如何使用 jquery 滑块过滤 ng-repeat 中的数据?的主要内容,如果未能解决你的问题,请参考以下文章

带有两个范围滑块过滤器的 jQuery 数据表

jQuery滑块范围:应用范围作为表格行的过滤器

使用 jQuery 过滤 HTML 表格

如何将滑块与其他复选框过滤器放在一起

如何使用 jQuery 中的滑块更改样式的值

如何使用 jQuery 滑块显示文本值?