CODEWITHSUNDEEP
javascriptangularjs
Kelvin
Kelvin

Reputation: 2288

Angular custom filter with multiple dropdown conditions

I am trying to filter with multiple dropdowns conditions. I am able to figure out how to filter them one by one. I want them to show all when nothing is chosen, value = "".

<select class="form-control" ng-model="filter.grade">
  <option ng-repeat="grade in product_grades" value="{{grade}}">{{grade}}</option>
</select>

<select class="form-control" ng-model="filter.slump">
  <option ng-repeat="slump in product_slumps" value="{{slump}}">{{slump}}</option>
</select>

<select class="form-control" ng-model="filter.flow">
  <option ng-repeat="flow in product_flows" value="{{flow}}">{{flow}}</option>
</select>

<select class="form-control" ng-model="filter.last_delivered">
  <option ng-repeat="last_delivered in product_last_delivereds" value="{{last_delivered}}">{{displayDate(last_delivered)}}</option>
</select>

<tr ng-repeat="job_product in job_products | filter : customFilter">

For one drop down, I use this.

$scope.customFilter = function (data) {
    if (data.Grade === $scope.filter.grade) {
      return true;
    } else if ($scope.filter.grade === '') {
      return true;
    } else {
      return false;
    }
  };

But when I use this for multiple dropdowns, it works. 

$scope.customFilter = function (data) {
    if (data.Grade === $scope.filter.grade && 
      data.Slump === $scope.filter.slump && 
      data.Flow === $scope.filter.flow && 
      data.LastDlvDate === $scope.filter.last_delivered) {
      return true;
    } else if ($scope.filter.grade === '') {
      return true;
    } else {
      return false;
    }
  };

When I choose a drop option now it doesn't show anything.

Here's a plunker:

http://plnkr.co/edit/elwmuqLvhYhIw3rUrEO1?p=preview

I am not sure why $filter for the date is not working.

But I want to show concrete A when choosing grade = "1".

Upvotes: 1

Views: 3335

Answers (1)

tiblu
tiblu

Reputation: 3078

Here is a working example - http://plnkr.co/edit/VTnbqchrdsrN5w0mflji?p=preview

What was wrong?

  • The $scope.customFilter conditionals were wrong - data.grade === $scope.filter.grade. The default value for each $scope.filter.* was empty string '' and because you used && them all together, while data.grade was selected, the others were '' === undefined which ends up being false. So I changed the conditionals to !$scope.filter.grade || data.grade === $scope.filter.grade && .... This works because I check if the select has not changed at all, I ignore it by returning true and then if the selected one equals to the data. That also made } else if ($scope.filter.grade === '') { irrelevant.

Additional notes on the implementation:

  • You do not have to initialize the scope variables $scope.filter.grade = "";, Angular will on first select change.
  • Fixed the date filter part, the $scope.displayDate is not needed. You can apply the filter in template {{last_delivered | date: 'dd-MM-yyyy'}}

Upvotes: 2

Related Questions