All geek questions in one place

Filter range angular.js array based on range

I have an angular.js array of 3 products and a range slider that calculates from 0 - 20 in increments of 1 . I need to do this, since I move the range slider, it will filter my array and show only products with the height property that is suitable for this category.

i.e.: filtering 0 to 10 will show anything with a height of 0, 1, 2, 3, 5, 6, 7, 8, 9, 10 .

This is not necessary for my question, but if it were possible to add inches to the end of the value, I would appreciate this help.

My html is just a basic range slider:

 <body ng-controller="MainCtrl" style="min-height: 600px" > <div style="background-color: #808080;margin-left: 50px;margin-right: 50px; padding: 30px;"> <pre>{{ priceSlider | json }}</pre> <rzslider rz-slider-floor="priceSlider.floor" rz-slider-ceil="priceSlider.ceil" rz-slider-model="priceSlider.min" rz-slider-high="priceSlider.max" rz-slider-step="{{priceSlider.step}}"></rzslider> <div class="info" ng-repeat="p in products"> {{p.name}} {{p.height}} </div> </div> </body>

My App.js // application

 var app = angular.module('plunker', ['rzModule']); app.controller('MainCtrl', function($scope) { $scope.priceSlider = { min: 0, max: 20, ceil: 20, floor: 0, step: 1 }; $scope.products = [ { name: 'one', height: '00' }, { name: 'two', height: '10' }, { name: 'three', height: '20' } ]; });

Since I have to call some external sources and have a ton of css in it, here is the codepen link

I tried to solve this within a few days and start to doubt, even if it is possible! Thanks for the help in advance!

+2
source share
2 answers

Add the following function to the controller:

  $scope.minFilter = function (p) { return p.height >= $scope.priceSlider.min; }; $scope.maxFilter = function (p) { return p.height <= $scope.priceSlider.max; };

Then use these filters in your ng-repeat:

 <div class="info" ng-repeat="p in products | filter:minFilter | filter:maxFilter ">

See: http://codepen.io/anon/pen/GgYzze

+1
source

You need to write your own AngularJS filter to achieve this.

In your javascript

 app.filter('onlyProductsWithinHeights', function(){ return function(products, minHeight, maxHeight){ var filtered = []; angular.forEach(products, function(product){ if(product.height >= minHeight && product.height <= maxHeight) filtered.push(product); }); return filtered; }; };

In your markup

 <div class="info" ng-repeat="p in products | onlyProductsWithinHeights:priceSlider.min:priceSlider.max"> {{p.name}} {{p.height}} </div>
+3
source

Source: https://habr.com/ru/post/984004/

More articles:


All Articles