AngularJS $filter in controller with or condition for same attribute

10,519

Solution 1

You can add a function in filter's expression:

$scope.filteredTicket = $filter('filter')($scope.tickets, function(value){
        return value.assignee === null || value.assignee.id === 'ak';
});

Plunkr

Solution 2

Just filter it manually with Array.prototype.filter method, then you have more flexibility:

$scope.filterData = function(criteria) {
  if (criteria == 1) {
    $scope.filteredTicket = $scope.tickets.filter(function(ticket) {
      return ticket.assignee === null || ticket.assignee.id == 'pratap';
    });
  } 
  else {
    $scope.filteredTicket = $scope.tickets.filter(function(ticket) {
      return ticket.assignee === null || ticket.assignee.id == 'ak';
    });
    console.log($scope.filteredTicket);
  }
};

Demo: https://plnkr.co/edit/MyYfkKzYdJmdAeFHYEvw?p=preview

Share:
10,519
Pratap A.K
Author by

Pratap A.K

Updated on June 28, 2022

Comments

  • Pratap A.K
    Pratap A.K almost 2 years

    controller:

    var myApp = angular.module('myApp', []);
    
    myApp.controller('myCtrl', ['$scope', '$filter', function($scope, $filter){
    
        $scope.tickets = [
                          {title : 'ticket1', assignee : {id:'pratap', name: 'PRATAP'}},
                          {title : 'ticket2', assignee : null},
                          {title : 'ticket3', assignee : {id:'ak', name: 'AK'}}
                          ];    
    
        $scope.defaultOption = 1;
        $scope.options = [
                          {id:1, name : 'MY TICKETS'},
                          {id:2, name : 'OTHERS TICKET'}
                          ];
    
        $scope.filteredTicket = [];
    
        $scope.filterData = function(criteria) {
            if (criteria == 1) {
                $scope.filteredTicket = $filter('filter')($scope.tickets, {assignee: {id:'pratap'}});
            } else {
                $scope.filteredTicket = $filter('filter')($scope.tickets, {assignee: null, assignee: {id:'ak'}});
                console.log($scope.filteredTicket);
            }
    
    
        };
    
        $scope.filterData($scope.defaultOption);
    
    }]);
    

    HTML:

    <div ng-controller="myCtrl">
    <div>Current User: pratap</div>
    <div>
        FILTER: <select ng-model="defaultOption" ng-change="filterData(defaultOption)" ng-options="option.id as option.name for option in options"></select>
    </div>
        <div>
            <h1>Tickets</h1>
            <ul>
                <li ng-repeat="ticket in filteredTicket">{{ticket.title}}</li>
            </ul>
        </div>  
    </div>  
    

    I would like to know if it is possible to use same object attribute to form or condition in $filter, something like below

    $scope.filteredTicket = $filter('filter')($scope.tickets, {assignee: null, assignee: {id:'ak'}});
    

    so that I get both object which has assignee:null and assignee:'ak'. If I select OTHERS TICKETS I need to dispplay ticket2 and ticket3, but as of now I am getting only ticket3.

    Can some one please help??

    Created-Plunker-Here