角度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; 
    };