具有最小值和最大值的角度过滤器

我在获取角度以正确过滤我的结果方面遇到了一些麻烦。我试图使用自定义过滤器从最小输入和最大输入获取参数。具有最小值和最大值的角度过滤器

/index.html

<input ng-model="minHorsepower"> 
<input ng-model="maxHorsepower"> 
... 
tr(ng-repeat="plane in planes | filter:horsepowerFilter")

/controllers.js

//Horsepower filter 
$scope.horsepowerFilter = function(plane) { 
    var ret = true; 

    if($scope.minHorsepower && $scope.minHorsepower > plane.horsepower) { 
    ret = false; 
    } 

    if($scope.maxHorsepower && $scope.maxHorsepower < plane.horsepower) { 
    ret = false; 
    } 

    return ret; 
}; 

$scope.planes = [ 
    { 
     'make' : 'Piper', 
     'model' : 'Arrow', 
     'modelNumber' : 'PA-28R-180', 
     'horsepower' : '180', 
     'gear' : 'retractable', 
    }, 
    { 
     'make' : 'Piper', 
     'model' : 'Arrow', 
     'modelNumber' : 'PA-28R-200', 
     'horsepower' : '200', 
     'gear' : 'retractable', 
    } 
];

它的工作原理最初，当我在controllers.js设置$ scope.minHorsepower/$ scope.maxHorsepower，但只是起初，不是当我把其他东西放在<input>中时。此外，它预先填充输入并过滤结果。当我改变输入值时，它不能正常工作。

我引用这个堆栈溢出线程，但我找不到我们的代码进行任何重大差异... AngularJS multiple filter with custom filter function

感谢您的帮助。

来源

2014-01-13 Andrew Samuelsen

通常，当你提供的jsfiddle或plnkr – allenhwkim

这种问题得到quicky回答我建议你确保使用数字。在你的代码中，你正在比较字符串，它不会像你期望的那样工作。例如您可以添加零（'马力+ 0'）将字符串转换为数字。 – Tosh

我做了一个plnkr http://plnkr.co/edit/GnF6IE?p=preview但没有问题过滤它。你可以发布你的plnkr吗？ – Daiwei

不幸的是，我无法准确指出你的代码存在的问题。但是，我认为我创建了a plnkr（我相信）按预期工作。

除了使用parseFloat解析输入外，逻辑似乎是相同的。不解析输入到数字形式不应该“破坏”它，但可能会使它表现奇怪（例如“9”>“10”）。

无论如何，希望你可以拉出有用的作品，让它工作。

来源

2014-01-14 02:12:02

要确保模型值是数字而不是字符串，请将输入的type更改为number。

<input type="number" ng-model="minHorsepower" /> 
<input type="number" ng-model="maxHorsepower" />

此外，请确保您的模型值是数字而不是字符串。

或者，您可以在您的过滤器中通过parseFloat(...)运行所有操作。

来源

2014-01-14 01:15:30 rtcherry

由于您只向过滤器发送一个函数，因此它不知道是否需要监视任何值更改，从而在发生过滤器函数时触发它。

当您将过滤器定义为{{filter_expression | filter：filterValue}}，angular观察filterValue并在更改时触发过滤器函数。

为了达到你所需要的，你可以自己定义过滤器：

angular.module('myApp') 
    .filter('range', function(){ 
    return function(items, property, min, max) { 
     return items.filter(function(item){ 
     return item[property] >= min && item[property] <= max; 
     }); 
    }; 
    });

，并调用它像这样：

ng-repeat="plane in planes | range : 'horsepower' : minHorsepower : maxHorsepower"

来源

2015-05-05 13:25:06 andrei

具有最小值和最大值的角度过滤器

回答

相关问题