在范围滑角JS过滤NG-重复 [英] Filter ng-repeat on range slider angular js

问题描述

我使用我的项目rangle滑块。我想过滤的范围滑块的滑动NG重复。我想过滤的价格数据。我的code
HTML： -

i'm using rangle slider on my project. i want to filter the ng-repeat on sliding of range slider. i want to filter the data on the price. my code 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>

控制器： -

controller:-

$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;
};

这是不是为我工作。
请帮我： - （

this is not worked for me. Please help me :-(

推荐答案

我觉得你需要一个自定义过滤器可过滤特定的价格，显示其对价格的过滤器边界的特定项目，请参见下面的code

I think u need a custom filter which filters for a particular price and show the particular item which has the filter boundary on the price , please see the below code

控制器：

$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阵列的方法或数组（E​​S5）的滤波方法

you can use forEach array method or filter method of array(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）使用箭头功能滤波法

ES2015 (ES6) filter method using arrow functions

   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=$p$ PVIEW

这篇关于在范围滑角JS过滤NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！