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> 中放置其他内容时秒。此外，它预填充输入并过滤结果。当我更改输入值时，它无法正常工作。

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

感谢您的帮助。

Answer 1

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

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

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

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