2

I have an angular.js array of 3 products and a range slider that is counting from 0 - 20 with a step of 1. I need to make it so, as I slide the range slider it will filter my array and only show products with the height property that fits in that category.

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

This is not required for my question but if it was possible to append inches to the end of the value, I would appreciate that help as well.

My html is just a basic range slider set up:

<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 //app

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 to some outside sources and have a ton of css in this aswell, here is a codepen link

I have been trying to solve this for days and am starting to question if it's even possible! Thanks for the help in advance!

knocked loose
  • 3,142
  • 2
  • 25
  • 46

2 Answers2

3

You need to write your own AngularJS filter in order to acheive that.

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>
Yossi Abraham
  • 101
  • 3
1

Add the following function to your 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

trees_are_great
  • 3,881
  • 3
  • 31
  • 62