javascript - 具有最小值和最大值的 Angular 滤波器

Question

我在调整 Angular 以正确过滤结果时遇到一些问题。我正在尝试使用一个自定义过滤器，该过滤器从最小输入和最大输入获取参数。

/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> 中添加其他内容时不起作用。 s。此外，它预填充输入并过滤结果。当我更改输入的值时，它无法正常工作。

我引用了这个 Stack Overflow 线程，但我在我们的代码中找不到任何实质性差异... AngularJS multiple filter with custom filter function

感谢您的帮助。

Answer 1

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

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

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

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