CODEWITHSUNDEEP
angularjs
Arcagully
Arcagully

Reputation: 364

Angular filter using OR instead of AND logic

I'm having some checkboxes and on check, table filter values. But if I select active and draft it doesn't show anything because it's implementing AND logic, I need filters that is using OR logic.

<div class="clearfix">
      <input data-ng-model="active" data-ng-true-value="active" class="pull-left" type="checkbox" id="active"/>
      <label class="pull-left" for="active">Active</label>
</div>
<div class="clearfix">
      <input data-ng-model="draft" data-ng-true-value="draft" class="pull-left" type="checkbox" id="draft"/>
      label class="pull-left" for="draft">Draft</label>
</div>


<table class="table">
<tr ng-repeat="campaign in dashboard.campaigns | filter:all | filter:active | filter:draft">
      <td>{{campaign.name}}</td>
      <td>{{campaign.startDate}}</td>
      <td>{{campaign.endDate}}</td>
      <td>{{campaign.status}}</td>
      <td>{{campaign.tasks}}</td>
</tr>

Edit: here is the solution 

app.filter('byStatus', [function () {
    return function (campaigns, active, draft) {
        var tempCampaigns = [];

        angular.forEach(campaigns, function (campaign) {
            if(campaign.status == active || campaign.status == draft ){
                tempCampaigns.push(campaign);
            }
        });
        return tempCampaigns;
    };
}]);

<tr ng-repeat="campaign in dashboard.campaigns | byStatus:active:draft">

thx all ;)

Upvotes: 0

Views: 867

Answers (1)

Sergey Moiseev
Sergey Moiseev

Reputation: 2963

You just need to implement custom filter like this:

angular.module('App.filters', []).filter('activeOrDraft', [function () {
return function (campaigns) {
    if (!angular.isUndefined(campaigns)) {
        var tempCampaigns = [];
        angular.forEach(campaigns, function (campaign) {
          if (campaign.active || campaign.draft) {
            tempCampaigns.push(campaign);
          }
        });
        return tempCampaigns;
    } else {
        return campaigns;
    }
};
}]);

and use it instead of filter:active | filter:draft like this:

| activeOrDraft

Not sure about meaning of all in your code, so add it if needed.

Upvotes: 1

Related Questions