我有一个包含 3 个产品的 angular.js 数组和一个范围 slider ，该 slider 从 0 - 20 计数，步长为 1。我需要这样做，当我滑动范围 slider 时，它将过滤我的数组，并仅显示具有适合该类别的高度属性的产品。
ie:过滤 0 到 10 将显示高度为 0, 1, 2, 3, 5, 6, 7, 8, 9 的任何内容, 10.
这对于我的问题来说不是必需的，但如果可以将英寸附加到值的末尾，我也将不胜感激。
我的 html 只是一个基本的范围 slider 设置:
<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
我已经尝试解决这个问题好几天了，并且开始怀疑这是否可能! 感谢您提前的帮助!
最佳答案
你需要自己写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>
关于javascript - 根据范围过滤 angular.js 数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29034234/