筛选基于范围内的angular.js阵列 [英] Filter an angular.js array based on range
问题描述
我有3个产品的angular.js阵列和范围滑块从 0计数 - 20 带的步骤 1 。我需要这样也好，因为我滑动滑块范围将筛选我的阵列，并只显示产品，适合在该类别中height属性。
I have an angular.js array of 3 products and a range slider that is counting from 0 - 20 with a step of 1. I need to make it so, as I slide the range slider it will filter my array and only show products with the height property that fits in that category.
即：过滤 0 到 10 将显示任何与 0的高度， 1，2，3，5，6，7，8，9，10
ie: filtering 0 to 10 would show anything with a height of 0, 1, 2, 3, 5, 6, 7, 8, 9, 10.
的这是不需要我的问题，但如果它是可能的英寸追加到值的末尾，我愿意帮助AP preciate为好。的
This is not required for my question but if it was possible to append inches to the end of the value, I would appreciate that help as well.
我的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链接
Since I have to call to some outside sources and have a ton of css in this aswell, here is a codepen link
我一直在试图解决这个问题了几天，我开始怀疑，如果它甚至有可能！
感谢您提前帮助！
I have been trying to solve this for days and am starting to question if it's even possible! Thanks for the help in advance!
推荐答案
添加以下功能到控制器：
Add the following function to your controller:
$scope.minFilter = function (p) {
return p.height >= $scope.priceSlider.min;
};
$scope.maxFilter = function (p) {
return p.height <= $scope.priceSlider.max;
};
然后在你的NG-重复使用这些过滤器：
Then use these filters in your ng-repeat:
<div class="info" ng-repeat="p in products | filter:minFilter | filter:maxFilter ">
请参阅：的http：//$c$cpen.io/anon/pen/GgYzze
这篇关于筛选基于范围内的angular.js阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
