根据范围过滤angular.js数组

时间:2015-03-13 14:02:25

标签: javascript jquery html css angularjs

我有一个包含3个产品的angular.js数组和一个范围滑块,从0 - 20计算,步长为1。我需要这样做,当我滑动范围滑块时,它将过滤我的数组并仅显示具有适合该类别的height属性的产品。

即:将0过滤到10会显示高度为0, 1, 2, 3, 5, 6, 7, 8, 9, 10的任何内容。

这不是我的问题所必需的,但是如果可以将inches附加到值的末尾,我也会感谢您的帮助。

我的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>

我的App.js //应用

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'
                    }
  ];

});

由于我不得不打电话给一些外部来源,并且在此也有大量的css,这里有一个 codepen link

我一直试图解决这个问题,并开始质疑它是否可能! 感谢您的帮助!

2 个答案:

答案 0 :(得分:3)

您需要编写自己的AngularJS filter才能实现这一目标。

在您的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;
    };
};

在你的标记中

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

答案 1 :(得分:1)

将以下功能添加到控制器:

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

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

然后在ng-repeat中使用这些过滤器:

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

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