角度ui网格单个过滤器+ cellfilter

Question

我已经在doc中使用ui grid实现了单个过滤器。 http://ui-grid.info/docs/#/tutorial/321_singleFilter

但我有一个cellFilter，当我过滤时，它会过滤数据，而不是使用过滤器呈现数据。最终用户的错误是什么？

例如，在这个笨蛋，我想过滤'男'或'女'输入。

http://plnkr.co/edit/TNJSlc0QkBI8Tu2Jejam?p=preview

var app = angular.module('app', ['ngTouch', 'ui.grid']); 

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
    var today = new Date(); 
    $scope.gridOptions = { 
    enableFiltering: false, 
    onRegisterApi: function(gridApi){ 
     $scope.gridApi = gridApi; 
     $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); 
    }, 
    columnDefs: [ 
     { field: 'name' }, 
     { field: 'gender', cellFilter: 'mapGender' }, 
     { field: 'company' }, 
     { field: 'email' }, 
     { field: 'phone' }, 
     { field: 'age' }, 
     { field: 'mixedDate' } 
    ] 
    }; 

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 
     $scope.gridOptions.data[0].age = -5; 

     data.forEach(function addDates(row, index){ 
     row.mixedDate = new Date(); 
     row.mixedDate.setDate(today.getDate() + (index % 14)); 
     row.gender = row.gender==='male' ? '1' : '2'; 
     }); 
    }); 

    $scope.filter = function() { 
    $scope.gridApi.grid.refresh(); 
    }; 

    $scope.singleFilter = function(renderableRows){ 
    var matcher = new RegExp($scope.filterValue); 
    renderableRows.forEach(function(row) { 
     var match = false; 
     [ 'name', 'company', 'email', 'gender' ].forEach(function(field){ 
     //row.entity[field] for gender col is 1 or 2 instead of male or female 
     if (row.entity[field].match(matcher)){ 
      match = true; 
     } 
     }); 
     if (!match){ 
     row.visible = false; 
     } 
    }); 
    return renderableRows; 
    }; 
}]) 
.filter('mapGender', function() { 
    var genderHash = { 
    1: 'male', 
    2: 'female' 
    }; 

    return function(input) { 
    if (!input){ 
     return ''; 
    } else { 
     return genderHash[input]; 
    } 
    }; 
}); 

Answer 1

没有为细胞称为filterCellFiltered，你可以应用到你的columnDefs一个选项：然后

{ field: 'gender', cellFilter: 'mapGender', filterCellFiltered: true }, 

uiGrid将采用 “搜索” 过滤器之前应用cellFilter。不幸的是，这个选项只适用于columnFilters。但是我们仍然可以在我们的singleFilter代码中使用它来检查我们是否想要匹配正常或过滤值。

不知道这是做的最好的方式，但这里是我的解决方案：

$scope.singleFilter = function(renderableRows){ 
    var matcher = new RegExp($scope.filterValue); 
    renderableRows.forEach(function(row) { 
     var match = false; 
     row.grid.columns.forEach(function(column){ 

     // get the filtered value, if filterCellFiltered option is set  
     var value; 
     if (column.filterCellFiltered){ 
      value = row.grid.getCellDisplayValue(row, column); 
     } else { 
      value = row.grid.getCellValue(row, column); 
     } 

     if (value.toString().match(matcher)){ 
      match = true; 
     } 
     }); 

     if (!match){ 
     row.visible = false; 
     } 
    }); 
    return renderableRows; 
    };