根据范围过滤angular.js数组

Question

I have an angular.js array of 3 products and a range slider that is counting from 0 - 20 with a step of 1 . 我有一个由3个产品组成的angular.js数组和一个范围滑块，其范围是从0 - 20 ，步长为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. 我需要这样做，当我滑动范围滑块时，它将过滤我的数组，并且仅显示具有适合该类别的height属性的产品。

ie: filtering 0 to 10 would show anything with a height of 0, 1, 2, 3, 5, 6, 7, 8, 9, 10 . 即：过滤0到10将显示高度为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. 对于我的问题，这不是必需的，但是如果可以在值的末尾附加inches ，那么我也将感谢您的帮助。

My html is just a basic range slider set up: 我的html只是设置的基本范围滑块：

<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 我的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 由于我必须致电一些外部资源，并且在其中也有大量的CSS，所以这里是一个Codepen链接

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! 我在这里先向您的帮助表示感谢！

Answer 1

You need to write your own AngularJS filter in order to acheive that. 为此，您需要编写自己的AngularJS过滤器。

In your Javascript 在您的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>

Answer 2

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: 然后在ng-repeat中使用以下过滤器：

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

See: http://codepen.io/anon/pen/GgYzze 请参阅： http ： //codepen.io/anon/pen/GgYzze

根据范围过滤angular.js数组

问题描述

2 个解决方案

解决方案1
3 2015-03-13 14:16:17

解决方案2
1 已采纳 2015-03-13 14:14:00

根据范围过滤angular.js数组

问题描述

2 个解决方案

解决方案1 3 2015-03-13 14:16:17

解决方案2 1 已采纳 2015-03-13 14:14:00

解决方案1
3 2015-03-13 14:16:17

解决方案2
1 已采纳 2015-03-13 14:14:00