Question

我在获取角度以正确过滤我的结果时遇到了一些麻烦。我正在尝试使用自定义过滤器，该过滤器从最小输入和最大输入获取参数。

/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

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

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

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

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

Answer 2

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

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

无论如何，希望你可以拿出有用的部分并让它发挥作用。

Answer 3

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

将过滤器定义为{{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"

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

3 个答案: