2017-10-03 5 views
0

In this plunk J'ai un ngTable avec show-filter=true. Une des colonnes (Nom du groupe) montre une chaîne qui est une fonction d'une autre colonne (Groupe). Le problème est que je ne peux pas filtrer par nom de groupe car il s'agit d'une colonne "dérivée". Comment filtrer par nom de groupe?Filtrage ngTable avec une fonction

HTML:

<table ng-table="tableParams" class="table table-bordered" show-filter="true"> 
     <tbody> 
      <tr ng-repeat="u in $data"> 
       <td title="'User ID'" filter="{ uid: 'text' }"> 
        {{ u.uid }} 
       </td> 
       <td title="'Name'" filter="{ nm: 'text' }"> 
        {{ u.nm }} 
       </td> 
       <td title="'Group ID'" filter="{ ugr: 'text' }"> 
        {{ u.ugr }} 
       </td> 
       <td title="'Group Name'" filter="{ groupName(u.ugr): 'text' }"> 
        {{ groupName(u.ugr) }}</td> 
      </tr> 
     </tbody> 
    </table> 

Javascript:

var app = angular.module('app', ['ngTable']); 

app.controller('myCtl', function($scope, NgTableParams) { 

     $scope.data = [{ 
      uid: 'User 1', 
      nm: 'Name 1', 
      ugr: 1 
     }, { 
      uid: 'User 2', 
      nm: 'Name 2', 
      ugr: 2 
     }, { 
      uid: 'User 3', 
      nm: 'Name 3', 
      ugr: 2 
     }]; 


     $scope.groupName = function(group){ 
      if (group==1) 
       return 'AAA'; 
      else 
       return 'BBB'; 
     }; 


     $scope.tableParams = new NgTableParams({ 
      count: 5 
     }, { 
      data: $scope.data 
     }); 

}); 

Répondre

1

Vous pouvez juste faire le regroupement dans le contrôleur pour vous épargner la peine.

J'ai utilisé la fonction map pour valider la définition de la valeur de groupe, puis l'afficher comme un filtre de texte normal.

La fonction de carte est la suivante

$scope.data = [{ 
      uid: 'User 1', 
      nm: 'Name 1', 
      ugr: 1 
     }, { 
      uid: 'User 2', 
      nm: 'Name 2', 
      ugr: 2 
     }, { 
      uid: 'User 3', 
      nm: 'Name 3', 
      ugr: 2 
     }].map(function(x){x['group'] = x.ugr === 1 ? 'AAA' : 'BBB';return x;}); 

est Ci-dessous une démo pour la même chose, laissez-moi savoir si cela vous aide.

Plunkr Demo