javascript - Angular filter with minimum and maximum values - Stack Overflow

admin管理员组

文章数量:1317894

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

<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',
  }
];

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.

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

Thanks for the help.

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

<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',
  }
];

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.

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

Thanks for the help.

• javascript
• angularjs
• angularjs-ng-repeat
• angularjs-filter

Share Improve this question Follow edited May 23, 2017 at 11:58 CommunityBot 111 silver badge asked Jan 13, 2014 at 23:09 Andrew SamuelsenAndrew Samuelsen 5,43299 gold badges4949 silver badges6969 bronze badges 3

• usually this kind of questions get quicky answered when you provide jsfiddle or plnkr – allenhwkim Commented Jan 13, 2014 at 23:21
• I suggest you to make sure using numbers. In your code you are paring strings and it would not work as you expect. e.g. You can add zero ('horsepower + 0') to convert string into a number. – Tosh Commented Jan 14, 2014 at 0:18
• I made a plnkr plnkr.co/edit/GnF6IE?p=preview but there is no problem filter it. Can you post your plnkr? – Daiwei Commented Jan 14, 2014 at 2:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

To ensure the model values are numbers and not strings, change the type for your inputs to be 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.

Unfortunately, I can't pinpoint exactly the problem you're having with your code. However, I think I have created a plnkr that (I believe) works as intended.

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).

Anyway, hopefully you can pull out the useful pieces and get it working.

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.

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"

本文标签： javascriptAngular filter with minimum and maximum valuesStack Overflow