Question

我在项目中使用rangle滑块。我想在范围滑块的滑动上过滤ng-repeat。我想过滤价格数据。我的代码 HTML： -

<range-slider min="slider.min" max="slider.max" step="slider.step" lower-value="slider.min" upper-value="slider.max"></range-slider>
 <div ng-repeat="data in data|filter:rangeFilter()">
    Property: {{data.name}}
    price: {{data.price}}
 </div>

控制器： -

$scope.data = [{

                 name : hoarding1,
                 price : 50000

                },
                {

                 name : hoarding2,
                 price : 50000

                },
                {

                 name : hoarding3,
                 price : 50000

                }
               ]

$scope.slider = {

    step : 10000,
    min : Math.min.apply(Math,$scope.data.map(function(item){return item.price;})),
    max : Math.max.apply(Math,$scope.data.map(function(item){return item.price;}))

}
$scope.rangeSlider = function (){

 return function( items, rangeInfo ) {
    var filtered = [];
    var min = parseInt(rangeInfo.min);
    var max = parseInt(rangeInfo.max);
    // If time is with the range
    angular.forEach(items, function(item) {
        if( item.price >= min && item.price <= max ) {
            filtered.push(item);
        }
    });
    return filtered;
};

这对我不起作用。请帮帮我： - （

Answer 1

我认为您需要一个自定义过滤器，可以过滤特定价格并显示价格上有过滤器边界的特定商品，请参阅以下代码

控制器：

$scope.rangeInfo = {
    min : Math.min.apply(Math,$scope.data.map(function(item){return item.price;})),
    max : Math.max.apply(Math,$scope.data.map(function(item){return item.price;}))
  }

<强>模板：

<div ng-repeat="data in data | priceRange:rangeInfo">
    Property: {{data.name}}
    price: {{data.price}}

 </div>

过滤

你可以使用forEach数组方法或数组的过滤方法（ES5）

app.filter('priceRange',function(){ return function(arrayItems,rangeInfo){ return arrayItems.filter(function(item){ console.log(item.price); return (item.price > rangeInfo.min && item.price < rangeInfo.max); }); } });

使用箭头功能的ES2015（ES6）过滤方法

app.filter('priceRange',function(){ return function(arrayItems,rangeInfo){ return arrayItems.filter((item) => (item.price > rangeInfo.min && item.price < rangeInfo.max)); } });

https://plnkr.co/edit/JQgcEsW4NIaAwDVAcfy0?p=preview

Answer 2

如果您要实施自定义过滤器，请在此处查看信息 https://docs.angularjs.org/tutorial/step_09

创建自定义过滤器后，您应该使用它，如下所示：

<div ng-repeat="data in data | customFilterName">

注意：我建议您不要为data等每个数据实例使用名称。也许可能会更好'item in data'或者像那样。

在范围滑块角度js上过滤ng-repeat

2 个答案: