Angular custom filter with multiple dropdown conditions

Question

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

try starting with replacing ng-repeat with ng-options and see if that makes the task easier. — Claies
– Claies, Commented Nov 29, 2015 at 1:38
sorry i think i asked the question incorrectly at first, i edited the question now, hope it makes more sense with the plunker example — Kelvin
– Kelvin, Commented Nov 29, 2015 at 2:29

tiblu · Accepted Answer · 2015-11-29 03:15:59Z

2

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'}}

answered Nov 29, 2015 at 3:15

tiblu

3,0881 gold badge25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kelvin Over a year ago

for the last delivered, it works in your plunker but for some reason in my code, it gets the value of {{last_delivered}} gets converted to a different timezone and it's not working - "2015-11-18T16:00:00.000Z" , any ideas

tiblu Over a year ago

Maybe because your $scope.last_delivered is supposed to be $scope.product_last_delivereds array of all possible dates.

Collectives™ on Stack Overflow

Angular custom filter with multiple dropdown conditions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related