Problem mit dem Filtern einer Winkeltabelle td

Question

Ich habe eine Tabelle in angularJS erstellt.

HTML:

<div class="widget-content" ng-controller="getAllBenchersController"> 
    <table ng-table="talentPoolList" show-filter="true" 
      class="table table-striped table-bordered"> 
     <tr ng-repeat="employee in $data" | filter: testFilter"> 
      <td data-title="'#'">{{$index + 1}}</td> 
      <td data-title="'Employee ID'" sortable="'employee.employeeNo'" 
        filter="{ 'employee.employeeNo': 'text' }"> 
       {{employee.employee.employeeNo}} 
      </td> 
      <td data-title="'Current State'" sortable="'state.state'" filter="{ 'state.state': 'text' }" 
        ng-class="{ red: employee.state.state == 'Available', blue: employee.state.state == 'Blocked'}"> 
       {{employee.state.state}}    
      </td> 
     </tr> 
    </table> 
</div> 

Im <td data-title="'Current State'"> ich einen Filter anwenden möchten. Ich möchte nur die Status anzeigen, die die Werte 'Verfügbar' und 'Blockiert' zurückgeben.

Mein Controller ist:

myApp.controller('getAllBenchersController', ['$scope', 'employeeTalentPoolServices', 'dataTable', '$window', '$timeout', function ($scope, employeeTalentPoolServices, dataTable, $window, $timeout) { 
    employeeTalentPoolServices.getAllBenchers().then(function (result) { 
     $scope.data = result.data; 
$scope.testFilter = function (item) { 
      return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked'); 
     } 
}); 

Die Zustände im Allgemeinen Werte zurückgeben -'Available‘, 'Blockiert', 'Billed' und '' Abgelehnt. Ich möchte, dass die Tabelle nur die Zustände "Verfügbar" und "Gesperrt" anzeigt. Bitte überprüfen Sie, was ich falsch mache.

Answer 1

Wenn Sie nur die Elemente mit dem Status 'verfügbar' und 'blockiert' anzeigen möchten, ist die beste Wahl, einen angularen Filter in der ng-Wiederholung anzuwenden. Auf diese Weise berechnet die ng-Wiederholung nur die Elemente, die für die Tabelle benötigt werden.

Sie können einen neuen Filter hinzufügen, zum Beispiel:

myApp.filter('filterState', 
    [], function() { 
     return function(items) { 
     return items.map(function(obj) { 
      if (obj.state === 'available' || obj.state === 'blocked') 
      return obj; 
     }); 
}); 

Nach sollte Ihr div Element sein:

<tr ng-repeat="employee in $data" | filter: filterState"> 

Answer 2

return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked'); 

Above Code gibt einen booleschen Wert, auch wenn Sie Array-Liste von Werten, hier wird nur ein Wert berücksichtigt. Sie sollten eine for-Schleife schreiben, dann überprüfen Sie die Werte. Siehe unten Code:

var filteredOutput=[]; 
for(var i=0;i<item.length; i++){ 
if(item[i].state.state.toLowerCase() === 'available' || item[i].state.state.toLowerCase() === 'blocked') 
    { 
    filteredOutput.push(item[i]); 
    } 
} 
return filteredOutput;