Adding an additional criteria to filtering function in AngularJS

Question

In following codepen I have two tables simulating a IT trouble ticketing data.

Everything works good for filtering based on either spans (All, Open, Closed) elements and text search. But, one of the tickets has a status of Acknowledge instead of either Open or Closed.

When you click Open I would like the Acknowledged status to be also included.

How can include the status of Acknowledged in my filtering function when the Open span element is clicked?

Thank you.

Here is my HTML:


  
    
      
        
          {{tab.label}}
        
        
          Search:
            
          
        
      
      
        
            
                ID
                Ticket Description
                Ticket Status
              Edit
            

           
              {{ticket.ID}}
              {{ticket.Description}}
              {{ticket.Status}}

            

        
      
    
  




 
    
      
        
          {{tab.label}}
        
        
          Search:
            
          
        
      
      
        
            
                ID
                Ticket Description
                Ticket Status
              Edit
            

          
              {{ticket.ID}}
              {{ticket.Description}}
              {{ticket.Status}}

            

        
      
    
  





  
  
    ×
    Some text in the Modal..

rkmsnc · Accepted Answer

var app = angular.module('myApp', []);
  app.controller('myController',
        function ($scope, $http) {

  $scope.ticketsA = [
    {
       "ID": "001",
      "Date": "1/11/2001",
       "Description": "Domain Unavailable Error",
       "Status": "Open"
    },
    {
       "ID": "002",
      "Date": "1/11/2001",
       "Description": "Install Open Source Software",
       "Status": "Closed"
    },
    {
       "ID": "003",
      "Date": "1/11/2001",
       "Description": "No key for Closed drawer",
       "Status": "Open"
    },
    {
       "ID": "006",
      "Date": "1/11/2001",
       "Description": "Internal Server Error",
       "Status": "Acknowledged"
    },
    {
       "ID": "007",
      "Date": "1/11/2001",
       "Description": "New Printer",
       "Status": "Open"
    }
  ];
  
    $scope.ticketsB = [
    {
       "ID": "001",
      "Date": "1/11/2001",
       "Description": "Domain Unavailable Error",
       "Status": "Open"
    },
    {
       "ID": "002",
      "Date": "1/11/2001",
       "Description": "Install Open Source Software",
       "Status": "Closed"
    },
    {
       "ID": "003",
      "Date": "1/11/2001",
       "Description": "No key for Closed drawer",
       "Status": "Open"
    },
    {
        "ID": "004",
      "Date": "1/11/2001",
       "Description": "Pin Reset Needed",
       "Status": "Closed"
    },
    {
       "ID": "006",
      "Date": "1/11/2001",
       "Description": "Internal Server Error",
       "Status": "Closed"
    },
    {
       "ID": "007",
      "Date": "1/11/2001",
       "Description": "New Printer",
       "Status": "Acknowledged"
    }
  ];
    
  $scope.countA = $scope.ticketsA.length;
  $scope.countB = $scope.ticketsB.length;
  $scope.reverseOrder = true;
  $scope.sortField = 'ID';
    
  $scope.sortBy = function(sortField) {
  $scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
      $scope.sortField = sortField;
  };
    
 $scope.var2="";
 $scope.var3="";
    
 $scope.tabsA = [ 
   { value: undefined, label: 'All' }, 
   { value: ['Open','Acknowledged'], label: 'Open'},
   { value: 'Closed', label: 'Closed'}
 ]; 
 
 $scope.tabsB = [ 
   { value: undefined, label: 'All' }, 
   { value: ['Open','Acknowledged'], label: 'Open'},
   { value: 'Closed', label: 'Closed'}
 ]; 
    
 $scope.updateA = function(filterText) {
   if(!filterText){
     $scope.searchTextA = filterText;
   } else {
     $scope.searchTextA = function(e) {
        return (filterText.indexOf(e.Status) !== -1);
    };
   }
 };
    
  $scope.updateB = function(filterText) {
      if(!filterText){
     $scope.searchTextB = filterText;
   } else {
     $scope.searchTextB = function(e) {
        return (filterText.indexOf(e.Status) !== -1);
    };
   }
 };
    
    $scope.openModal = function() {
      debugger
      modal.style.display = "block";
    }
  });

// Get the modal
var modal = document.getElementById('myModal');
// Get the  element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
// When the user clicks on  (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  console.log("button clicked");
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

body {
  margin: 10px;
}

.row-table {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

span {
  margin: 10px;
  cursor: pointer;
}

span:hover {
  background-color: black;
  color: white;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}






  
    
      
        
          {{tab.label}}
        
        
          Search:
            
          
        
      
      
        
            
                ID
              Date
                Ticket Description
                Ticket Status
              Edit
            
          
           
              {{ticket.ID}}
             {{ticket.Date}}
              {{ticket.Description}}
              {{ticket.Status}}

            
          
        
      
    
  




 
    
      
        
          {{tab.label}}
        
        
          Search:
            
          
        
      
      
        
            
                ID
                Ticket Description
                Ticket Status
              Edit
            
          
          
              {{ticket.ID}}
              {{ticket.Description}}
              {{ticket.Status}}

            
          
        
      
    
  





  
  
    ×
    Some text in the Modal..

$scope.tabsA = [ 
  { value: undefined, label: 'All' }, 
  { value: ['Open','Acknowledged'], label: 'Open'},
  { value: 'Closed', label: 'Closed'}
]; 



$scope.updateA = function(filterText) {
   if(!filterText){
     $scope.searchTextA = filterText;
   } else {
     $scope.searchTextA = function(e) {
       return (filterText.indexOf(e.Status) !== -1);
     };
   }
};

Adding an additional criteria to filtering function in AngularJS

Answers (1)

Related Questions