Question

我有一个包含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

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

Answer 1

您需要编写自己的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>

Answer 2

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

  $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

根据范围过滤angular.js数组

2 个答案: