How to filter data in ng-repeat using a jquery slider?
Here is how you can do that with ng-repeat
and a custom filter. Just use your binded value and replace them as min
and max
in myfilter
like:
<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; };});