Sortierung und Filter auf eine Angular-Tabelle anwenden

Question

Ich habe eine Angular-Demo-App heruntergeladen, um meinen Weg durch die Eckigen Grundlagen zu finden. Ich habe Probleme beim Anwenden eines Filters und Sortieren in eine Datentabelle. Ich habe es anhand einiger Beispiele gemacht und bin mir nicht sicher, ob es richtig ist.

Mein Tisch ist:

<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="'empno'" filter="{ 'empno': 'text' }"> 
{{employee.employee.employeeNo}} 
</td> 
<td data-title="'First Name'" sortable="'employee.employee.firstName'" filter="{ 'employee.employee.firstName': 'text' }"> 
          {{employee.employee.firstName}} 
         </td> 
    </tr> 
       </table> 

      </div> 

Controller:

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

Ich habe keine Ahnung, wie es funktioniert. Kann jemand erklären und eine Lösung zur Verfügung stellen, um dieses Problem zu beheben?

Vielen Dank im Voraus

Answer 1

So Ihr Demo-Beispiel zu erklären, ich ein ähnliches Beispiel erstellt haben, um Sie zu verstehen, was in Ihrer Frage geschieht.

Wir haben eine Mitarbeiterdaten mit unterschiedlichen Status, also wenn ich die Liste der Mitarbeiter anzeigen möchte ich nur zeigen "fair" und "gut" so habe ich eine Filterfunktion an filter Direktive übergeben, um zu sagen, welche Elemente sollten aus der Liste angezeigt werden.

Wenn Sie die Funktion beobachten, wird jedes Element aus der Liste übernommen und auf Status geprüft, um den gewünschten Status für die Anzeige zu erreichen.

Schauen Sie sich die Demo für die gleiche, hoffe, dies gibt Ihnen ein klares Verständnis darüber, was in Ihrer Demo-App passiert.

var app = angular.module('app',[]); 
 
app.controller('getAllBenchersController',function($scope,$filter){ 
 
    
 
    $scope.data = {employee:[ 
 
    
 
    {'no':1,'name':'max','status':'bad'}, 
 
    {'no':2,'name':'fox','status':'good'}, 
 
    {'no':3,'name':'juno','status':'bad'}, 
 
    {'no':4,'name':'pet','status':'fair'}, 
 
    {'no':5,'name':'xyz','status':'good'}, 
 
    {'no':6,'name':'shit','status':'bad'}, 
 
    {'no':7,'name':'doggy','status':'fair'}, 
 
    {'no':8,'name':'hmmm','status':'bad'} 
 
    ]} 
 
    
 
    //this test filter is a function which allows me to decide which data should be displayed in this case I've used 'fair' & 'good' status employees to be displayed... 
 
    $scope.testFilter = function (item) { 
 
      return (item.status.toLowerCase() === 'good' || item.status.toLowerCase() === 'fair'); 
 
     }; 
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" class="widget-content" ng-controller="getAllBenchersController"> 
 

 
       <table> 
 
      <tr ng-repeat="emp in data.employee | filter: testFilter"> 
 
         <td>{{$index+1}} </td> 
 
         <td> {{emp.no}}</td> 
 
         <td>{{emp.name}} </td> 
 
    </tr> 
 
       </table> 
 

 
      </div>