[英]How to filter data in ng-repeat using a jquery slider?
我使用的是一个jquery滑块Ion.RangeSlider 。 我有通过http发送的json数据,我使用ng-repeat指令在页面中显示它。 我想使用下面的滑块过滤JSON数据
在图像下你可以看到两个值185; 500 ,这是我将ng-model绑定到滑块时得到的值。
所以,我的问题是如何使用此滑块过滤我的数据?
编辑我改变了我正在使用的Slider并进行了相同的CSS更改,使其看起来像上面的滑块。 https://github.com/rzajac/angularjs-slider
以下是使用ng-repeat
和自定义过滤器的方法。 只需使用您的绑定值并将其替换为myfilter
min
和max
,如:
<div ng-repeat="item in items | myfilter: { min: slider.min, max: slider.max }">
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;
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.