javascript 具有最小值和最大值的角度过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21103207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular filter with minimum and maximum values
提问by Andrew Samuelsen
I'm having some trouble getting angular to properly filter my results. I'm attempting to use a custom filter that gets arguments from a minimum input and a maximum input.
我在获得角度以正确过滤我的结果时遇到了一些麻烦。我正在尝试使用从最小输入和最大输入获取参数的自定义过滤器。
/index.html
/index.html
<input ng-model="minHorsepower">
<input ng-model="maxHorsepower">
...
tr(ng-repeat="plane in planes | filter:horsepowerFilter")
/controllers.js
/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',
}
];
It works INITIALLY when I set $scope.minHorsepower/$scope.maxHorsepower in controllers.js, but only initially, not when I put something else in the <input>s. Furthermore, it prefills the inputs AND filters the results. It just doesn't work properly when I change the value of the inputs.
当我在controllers.js 中设置$scope.minHorsepower/$scope.maxHorsepower 时，它最初有效，但只是最初，而不是当我在<input>s 中放入其他东西时。此外，它预填充输入并过滤结果。当我更改输入值时，它无法正常工作。
I've referenced this Stack Overflow thread, but I can't find any material differences in our code... AngularJS multiple filter with custom filter function
我已经引用了这个 Stack Overflow 线程，但我在我们的代码中找不到任何实质性的差异......带有自定义过滤器功能的 AngularJS 多重过滤器
Thanks for the help.
谢谢您的帮助。
采纳答案by Brenton Alker
Unfortunately, I can't pinpoint exactly the problem you're having with your code. However, I think I have created a plnkrthat (I believe) works as intended.
不幸的是，我无法准确指出您的代码遇到的问题。但是，我想我已经创建了一个（我相信）可以按预期工作的 plnkr。
Apart from parsing the inputs with parseFloat, the logic seems to be the same. Not parsing the inputs to a numeric form shouldn't "break" it, but will possibly make it behave strangely ("9" > "10" for example).
除了用 parseFloat 解析输入之外，逻辑似乎是一样的。不解析数字形式的输入不应“破坏”它，但可能会使其行为异常（例如“9”>“10”）。
Anyway, hopefully you can pull out the useful pieces and get it working.
不管怎样，希望你能拿出有用的部分并让它工作。
回答by rtcherry
To ensure the model values are numbers and not strings, change the typefor your inputs to be number.
为确保模型值是数字而不是字符串，type请将输入的更改为number。
<input type="number" ng-model="minHorsepower" />
<input type="number" ng-model="maxHorsepower" />
Also, make sure your model values are numbers and not strings.
另外，请确保您的模型值是数字而不是字符串。
Alternatively, you can run everything through parseFloat(...)in your filter.
或者，您可以parseFloat(...)在过滤器中运行所有内容。
回答by andrei
Since you only send to the filter a function, it doesn't know to watch for any value changes, and thus to trigger the filter function when it happens.
由于您只向过滤器发送一个函数，它不知道要注意任何值的变化，因此在它发生时触发过滤器函数。
When you define a filter as {{ filter_expression | filter : filterValue}}, angular watches the filterValue and triggers the filter function when it changes.
当您将过滤器定义为 {{ filter_expression | filter : filterValue}}，angular 会观察 filterValue 并在它发生变化时触发过滤器功能。
To achieve what you need you can define your own filter:
为了实现您的需要，您可以定义自己的过滤器：
angular.module('myApp')
.filter('range', function(){
return function(items, property, min, max) {
return items.filter(function(item){
return item[property] >= min && item[property] <= max;
});
};
});
and call it like this:
并这样称呼它：
ng-repeat="plane in planes | range : 'horsepower' : minHorsepower : maxHorsepower"
