带有包含复选框的过滤器模板的角度网格过滤器

Question

我正在解决一个问题，即勾选复选框会过滤UI-GRID中的数据。我尝试了很多解决方案，但我无法弄清楚可以做些什么。

有人可以查看这个并告诉我是否有某种方法可以过滤ui-grid中的复选框选择。

请看下面的代码：

我也有一个plnkr。 http://plnkr.co/edit/HPiYpfvcRjpAoNqnNpze?p=preview

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var today = new Date();
var nextWeek = new Date();
nextWeek.setDate(nextWeek.getDate() + 7);

$scope.highlightFilteredHeader = function( row, rowRenderIndex, col,colRenderIndex ) {
if( col.filters[0].term ){
  return 'header-filtered';
} else {
  return '';
}
};

$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
  $scope.gridApi = gridApi;
},
columnDefs: [
  { field: 'gender', 
  filter: {
      term: '',
      type: uiGridConstants.filter.SELECT,
      condition: uiGridConstants.filter.EXACT,
      selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ]
    },
    headerCellClass: $scope.highlightFilteredHeader },
  ]
};

$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;
  });

  $scope.toggleFiltering = function(){
  $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
  $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
 };
}])
.run(['$templateCache', function($templateCache) {
$templateCache.put('ui-grid/ui-grid-filter',
"<div class=\"ui-grid-filter-container\" ng-repeat=\"colFilter in col.filters\" ng-class=\"{'ui-grid-filter-cancel-button-hidden' : colFilter.disableCancelFilterButton === true }\"><div ng-if=\"colFilter.type !== 'select'\"><input type=\"text\" class=\"ui-grid-filter-input ui-grid-filter-input-{{$index}}\" ng-model=\"colFilter.term\" ng-attr-placeholder=\"{{colFilter.placeholder || ''}}\" aria-label=\"{{colFilter.ariaLabel || aria.defaultFilterLabel}}\"><div role=\"button\" class=\"ui-grid-filter-button\" ng-click=\"removeFilter(colFilter, $index)\" ng-if=\"!colFilter.disableCancelFilterButton\" ng-disabled=\"colFilter.term === undefined || colFilter.term === null || colFilter.term === ''\" ng-show=\"colFilter.term !== undefined && colFilter.term !== null && colFilter.term !== ''\"><i class=\"ui-grid-icon-cancel\" ui-grid-one-bind-aria-label=\"aria.removeFilter\">&nbsp;</i></div></div><div ng-if=\"colFilter.type === 'select'\"><div class=\"ui-grid-filter-select ui-grid-filter-input-{{$index}}\" ng-model=\"colFilter.term\" ng-attr-placeholder=\"{{colFilter.placeholder || aria.defaultFilterLabel}}\" aria-label=\"{{colFilter.ariaLabel || ''}}\" ng-repeat=\"option in colFilter.selectOptions\"><input type=\"checkbox\" value=\"{{option.value}}\">{{option.label}}</div><div role=\"button\" class=\"ui-grid-filter-button-select\" ng-click=\"removeFilter(colFilter, $index)\" ng-if=\"!colFilter.disableCancelFilterButton\" ng-disabled=\"colFilter.term === undefined || colFilter.term === null || colFilter.term === ''\" ng-show=\"colFilter.term !== undefined && colFilter.term != null\"><i class=\"ui-grid-icon-cancel\" ui-grid-one-bind-aria-label=\"aria.removeFilter\">&nbsp;</i></div></div></div>"
 )}]);