根据范围筛选一个 Angular.js 数组。

8 浏览
0 Comments

根据范围筛选一个 Angular.js 数组。

我有一个包含3个产品的angular.js数组和一个范围滑块，范围从0 - 20，步长为1。我需要使得当我滑动范围滑块时，它会过滤我的数组，并只显示符合该范围内高度属性的产品。

例如：对0到10进行过滤将显示高度为0, 1, 2, 3, 5, 6, 7, 8, 9, 10的任何产品。

这不是我问题的要求，但如果能够在值的末尾添加inches，我将非常感激。

我的HTML只是一个基本的范围滑块设置：


    
{{ priceSlider | json }}


    
                {{p.name}}
                {{p.height}}
  


我的App.js


//app




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链接。


我已经尝试解决这个问题好几天了，开始怀疑这是否可能！


提前感谢您的帮助！
0

2 答案

0 Comments

问题的出现原因是需要根据一定的范围筛选出一个angular.js数组。解决方法是编写自己的AngularJS过滤器来实现这个功能。

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

在标记中，可以使用以下代码来应用过滤器并显示满足条件的结果：


    {{p.name}}
    {{p.height}}

原作者意识到需要编写自定义过滤器来实现范围筛选的功能，但不确定如何指定最小和最大高度来进行筛选。

0
0 Comments

问题的出现原因：

在angular.js中，ng-repeat指令用于循环遍历一个数组，并将每个元素渲染到页面上。在某些情况下，我们可能需要根据一定的条件对数组进行过滤，只显示符合条件的元素。然而，ng-repeat指令本身并不提供对数组的范围过滤功能。

解决方法：

为了解决这个问题，我们可以自定义过滤函数，并在ng-repeat指令中使用这些过滤函数来对数组进行过滤。在给定的示例中，我们定义了两个过滤函数：minFilter和maxFilter。

minFilter函数用于过滤高度大于等于给定最小值的元素。它使用了$scope对象中的priceSlider.min属性，该属性表示最小值。

maxFilter函数用于过滤高度小于等于给定最大值的元素。它使用了$scope对象中的priceSlider.max属性，该属性表示最大值。

然后，我们在ng-repeat指令中使用这两个过滤函数来过滤products数组。ng-repeat指令会遍历products数组，并将符合minFilter和maxFilter条件的元素渲染到页面上。

最终，我们可以在页面上看到只显示了高度在给定范围内的产品。

参考链接：[http://codepen.io/anon/pen/GgYzze](http://codepen.io/anon/pen/GgYzze)

0