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

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

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

这不是为我工作。请帮我:-(

来源

2016-01-29 Ranjith M

对不起它不是资产（ES6）滤波器的方法是我提供的数据@Vlad Dekhanov –

你能分享你的'rangeFilter'对象的内容吗？ –

可否请您详细说明，您想过滤只有价格的物品吗？什么是rangeFilter –

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

控制器：

$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使用箭头功能

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

来源

2016-01-29 10:42:42

工作非常感谢@shushanth p –

@Ranjith，当然！，没问题。我很高兴它为你工作。 –

如果你要实现你的自定义过滤器，你应该检查这里 https://docs.angularjs.org/tutorial/step_09

信息创建自定义过滤器后，你应该使用它象下面这样：

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

注意：我建议你不要为每个数据实例使用名称，例如data也许可以更好'item in data'或这样的模糊

来源

2016-01-29 09:35:31

在范围滑​​块上过滤ng-repeat angular js

回答

相关问题

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