Javascript 角度UI网格自定义过滤器按钮

我有一些使用Angular UI Grid的数据，我想使用单个过滤器按钮过滤单个列值

过滤器输入工作，但过滤器按钮尚未工作。实用的过滤器按钮是否可行

Plunker：

HTML:

---

好的，我用两个按钮都可以：

---

好的，我用两个按钮都可以：

控制器：

/**
 * Appuser User Controller
 */

(function() {

     Appuser.controller('AppuserColumnFilterModalCtrl', function( $scope, $compile, $timeout,$rootScope ,uiGridConstants,$translate,localStorageService,coriUtility) {
        var $elm;
        $scope.showitem=true;

        $scope.showcolor=true;
        angular.forEach($scope.$parent.grid.columns, function (value, key) {

            if($scope.$parent.col.colDef.field ==value.field)
            {
                var value= coriUtility.getfiltercheck(value.field);
                if(value)
                {
                    $scope.showitem =false;
                }
                else {
                    $scope.showitem =true;
                }


            }


        });



        $scope.showFilterModal = function() {
            $scope.listOfFilters = [];
            $scope.columnname=$scope.col.colDef.field;
            $scope.columnnameDisplay=$scope.col.colDef.displayName;
            $scope.col.grid.rows.forEach( function ( row ) {
                // if(row.entity[$scope.columnname]==$scope.columnname) {
                if(row.entity[$scope.columnname]==null)
                {
                    row.entity[$scope.columnname]='-';
                }

                if ($scope.listOfFilters.indexOf(row.entity[$scope.columnname]) === -1) {
                    $scope.listOfFilters.push(row.entity[$scope.columnname]);
                }
                //}
            });
            $scope.listOfFilters.sort();

            $scope.gridOptions = {
                data: [],
                enableColumnMenus: false,
                enableFiltering: true,
                field:  $scope.columnname,
                displayName:  $scope.columnnameDisplay,
                headerCellFilter: 'translate',
                headerCellClass: 'ui-grid-header-with-filter ui-gridcustom',
                placeholder: $scope.columnnameDisplay,
                columnLocalType: 'filter',
                filter:
                    {  placeholder: $scope.columnnameDisplay,
                        filterName: "containsFilter",
                        condition: uiGridConstants.filter.CONTAINS,
                    },
                onRegisterApi: function( gridApi) {
                    $scope.gridApi = gridApi;
                    if ( $scope.colFilter && $scope.colFilter.listTerm ){
                        $timeout(function() {
                            $scope.colFilter.listTerm.forEach( function( column ) {
                                if(column==null){ column="."}
                                var entities = $scope.gridOptions.data.filter( function( row ) {
                                    if(row.column==null|| row.column==".") row.column="-";
                                    return row.column === column;
                                });

                                if( entities.length > 0 ) {

                                    $scope.gridApi.selection.selectRow(entities[0]);
                                }
                            });


                        });
                    }


                }
            };



            $scope.listOfFilters.forEach(function( column ) {
                $scope.gridOptions.data.push({column: column});
            });

            var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content custompopup"><div class="modal-header">{{ columnnameDisplay | translate }}</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection  class="modalGrid"></div></div><div class="modal-footer"><button id="buttonReset" class="btn btn-primary" ng-click="reset()">{{ "COMMONFILTERBUTTONRESET" | translate }}</button><button id="buttonClose" class="btn btn-primary" ng-click="close()">{{ "COMMONFILTERBUTTONFILTER" | translate }}</button></div></div></div></div>';
            $elm = angular.element(html);
            angular.element(document.body).prepend($elm);

            $compile($elm)($scope);

        };

        $scope.close = function() {
            var columns = $scope.gridApi.selection.getSelectedRows();
            $scope.colFilter.listTerm;
            $scope.colFilter.listTerm = [];
            $scope.filternull="";
            columns.forEach( function( column ) {
                if(column.column==null || column.column=="" )column.column="-";
                $scope.colFilter.listTerm.push( column.column );
            });
            $scope.colFilter.term = $scope.colFilter.listTerm.join(', ');
            if($scope.colFilter.term.length>0)
            {
                $scope.showitem=false;
            }
            else {
                $scope.showitem=true;
            }
            // $scope.colFilter.condition =2;
            if($scope.colFilter.listTerm.length==1)
            {
                $scope.colFilter.condition = uiGridConstants.filter.EXACT;
            }
            else {

                $scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
            }



            if ($elm) {
                $elm.remove();
            }
        };


        $scope.reset = function() {
            var columns = $scope.gridApi.selection.getSelectedRows();
            $scope.colFilter.listTerm = [];
            $scope.filternull="";

            $scope.colFilter.term = "";
            if($scope.colFilter.term.length>0)
            {
                $scope.showitem=false;
            }
            else {
                $scope.showitem=true;
            }
            $scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
            $scope.gridApi.selection.clearSelectedRows();
            if ($elm) {
                $elm.remove();
            }
        };
        if( $scope.showitem==false){
        }
    }).directive('filterCustomModal', function() {


        return {
            restrict: "A",
                template: '<div style="font-size: 14px; padding-right: 0px; padding-bottom: 2px;float: right !important;" ><md-icon class="pull-left" ng-if="showitem" style="font-size: 14px;color: silver;"  ng-click="showFilterModal()">filter_list</md-icon> <md-icon class="pull-left" ng-if="!showitem" style="font-size: 14px;font-weight: bold;color: #008080;" ng-click="showFilterModal()">filter_list</md-icon> </div>',
              controller: 'AppuserColumnFilterModalCtrl',

        };
    });// Appuser Area Controller

}).call(this);

/**
*应用程序用户控制器
*/
（功能（）{
控制器（'AppuserColumnFilterModalCtrl'，函数（$scope、$compile、$timeout、$rootScope、uiGridConstants、$translate、localStorageService、coriUtility）{
var$elm；
$scope.showitem=true；
$scope.showcolor=true；
angular.forEach（$scope.$parent.grid.columns，函数（值，键）{
if（$scope.$parent.col.colDef.field==value.field）
{
var value=coriputility.getfiltercheck（value.field）；
如果（值）
{
$scope.showitem=false；
}
否则{
$scope.showitem=true；
}
}
});
$scope.showFilterModel=函数（）{
$scope.listofilters=[]；
$scope.columnname=$scope.col.colDef.field；
$scope.columnnameDisplay=$scope.col.colDef.displayName；
$scope.col.grid.rows.forEach（函数（行）{
//if（row.entity[$scope.columnname]==$scope.columnname）{
if（row.entity[$scope.columnname]==null）
{
row.entity[$scope.columnname]='-'；
}
if（$scope.listofilters.indexOf（row.entity[$scope.columnname]）=-1）{
$scope.listofilters.push（row.entity[$scope.columnname]）；
}
//}
});
$scope.listoffilter.sort（）；
$scope.gridOptions={
数据：[]，
EnableColumn菜单：false，
启用筛选：正确，
字段：$scope.columnname，
displayName:$scope.columnnameDisplay，
headerCellFilter:“翻译”，
headerCellClass:“带有筛选器ui gridcustom的ui网格标头”，
占位符：$scope.columnnameDisplay，
columnLocalType:“筛选器”，
过滤器：
{占位符：$scope.columnnameDisplay，
过滤器名称：“容器过滤器”，
条件：uiGridConstants.filter.CONTAINS，
},
onRegisterApi:函数（gridApi）{
$scope.gridApi=gridApi；
if（$scope.colFilter&&$scope.colFilter.listTerm）{
$timeout（函数（）{
$scope.colFilter.listTerm.forEach（函数（列）{
如果（column==null）{column=“.”}
var entities=$scope.gridOptions.data.filter（函数（行）{
如果（row.column==null | | row.column==”）row.column=“-”；
返回row.column==列；
});
如果（entities.length>0）{
$scope.gridApi.selection.selectRow（实体[0]）；
}
});
});
}
}
};
$scope.listofilters.forEach（函数（列）{
$scope.gridOptions.data.push（{column:column}）；
});
var html={{columnnameDisplay | translate}{{“COMMONFILTERBUTTONRESET”| translate}}{{“COMMONFILTERBUTTONFILTER”| translate}}；
$elm=angular.element（html）；
元素（document.body）.prepend（$elm）；
$compile（$elm）（$scope）；
};
$scope.close=函数（）{
var columns=$scope.gridApi.selection.getSelectedRows（）；
$scope.colFilter.listTerm；
$scope.colFilter.listTerm=[]；
$scope.filternull=“”；
columns.forEach（函数（列）{
如果（column.column==null | | column.column==“”）column.column=“-”；
$scope.colFilter.listTerm.push（column.column）；
});
$scope.colFilter.term=$scope.colFilter.listTerm.join（'，'）；
if（$scope.colFilter.term.length>0）
{
$scope.showitem=false；
}
否则{
$scope.showitem=true；
}
//$scope.colFilter.condition=2；
if（$scope.colFilter.listTerm.length==1）
{
$scope.colFilter.condition=uiGridConstants.filter.EXACT；
}
否则{
$scope.colFilter.condition=newregexp（$scope.colFilter.listTerm.join（“|”）；
}
如果（$elm）{
$elm.remove（）；
}
};
$scope.reset=函数（）{
var columns=$scope.gridApi.selection.getSelectedRows（）；
$scope.colFilter.listTerm=[]；
$scope.filternull=“”；
$scope.colFilter.term=“”；
if（$scope.colFilter.term.length>0）
{
$scope.showitem=false；
}
否则{
$scope.showitem=true；
}
$scope.colFilter.condition=newregexp（$scope.colFilter.listTerm.join（“|”）；
$scope.gridApi.selection.clearSelectedRows（）；
如果（$elm）{
$elm.remove（）；
}
};
如果（$scope.showitem==false）{
}
}).directive（'filterCustomModal'，function（）{
返回{
限制：“A”，
模板：“过滤器列表过滤器列表”，
控制器：'应用程序用户
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: 'company' }
    ]
  };

  $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.filterText = 'Mixers';

  $scope.filterBtn = function() {
    $scope.gridApi.grid.columns[1].filters[0] = {
      condition: uiGridConstants.filter.EXACT,
      term: 'Mixers'
    };

    $scope.gridOptions.enableFiltering = true
    $scope.gridApi.grid.refresh(); 
  }

  $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' ].forEach(function( field ){
        if ( row.entity[field].match(matcher) ){
          match = true;
        }
      });
      if ( !match ){
        row.visible = false;
      }
    });
    return renderableRows;
  };
}]);

$scope.filterText = '';

  $scope.filterBtn = function() {
    $scope.filterText = 'Mixers';
    $scope.gridApi.grid.refresh(); 
  }

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

/**
 * Appuser User Controller
 */

(function() {

     Appuser.controller('AppuserColumnFilterModalCtrl', function( $scope, $compile, $timeout,$rootScope ,uiGridConstants,$translate,localStorageService,coriUtility) {
        var $elm;
        $scope.showitem=true;

        $scope.showcolor=true;
        angular.forEach($scope.$parent.grid.columns, function (value, key) {

            if($scope.$parent.col.colDef.field ==value.field)
            {
                var value= coriUtility.getfiltercheck(value.field);
                if(value)
                {
                    $scope.showitem =false;
                }
                else {
                    $scope.showitem =true;
                }


            }


        });



        $scope.showFilterModal = function() {
            $scope.listOfFilters = [];
            $scope.columnname=$scope.col.colDef.field;
            $scope.columnnameDisplay=$scope.col.colDef.displayName;
            $scope.col.grid.rows.forEach( function ( row ) {
                // if(row.entity[$scope.columnname]==$scope.columnname) {
                if(row.entity[$scope.columnname]==null)
                {
                    row.entity[$scope.columnname]='-';
                }

                if ($scope.listOfFilters.indexOf(row.entity[$scope.columnname]) === -1) {
                    $scope.listOfFilters.push(row.entity[$scope.columnname]);
                }
                //}
            });
            $scope.listOfFilters.sort();

            $scope.gridOptions = {
                data: [],
                enableColumnMenus: false,
                enableFiltering: true,
                field:  $scope.columnname,
                displayName:  $scope.columnnameDisplay,
                headerCellFilter: 'translate',
                headerCellClass: 'ui-grid-header-with-filter ui-gridcustom',
                placeholder: $scope.columnnameDisplay,
                columnLocalType: 'filter',
                filter:
                    {  placeholder: $scope.columnnameDisplay,
                        filterName: "containsFilter",
                        condition: uiGridConstants.filter.CONTAINS,
                    },
                onRegisterApi: function( gridApi) {
                    $scope.gridApi = gridApi;
                    if ( $scope.colFilter && $scope.colFilter.listTerm ){
                        $timeout(function() {
                            $scope.colFilter.listTerm.forEach( function( column ) {
                                if(column==null){ column="."}
                                var entities = $scope.gridOptions.data.filter( function( row ) {
                                    if(row.column==null|| row.column==".") row.column="-";
                                    return row.column === column;
                                });

                                if( entities.length > 0 ) {

                                    $scope.gridApi.selection.selectRow(entities[0]);
                                }
                            });


                        });
                    }


                }
            };



            $scope.listOfFilters.forEach(function( column ) {
                $scope.gridOptions.data.push({column: column});
            });

            var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content custompopup"><div class="modal-header">{{ columnnameDisplay | translate }}</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection  class="modalGrid"></div></div><div class="modal-footer"><button id="buttonReset" class="btn btn-primary" ng-click="reset()">{{ "COMMONFILTERBUTTONRESET" | translate }}</button><button id="buttonClose" class="btn btn-primary" ng-click="close()">{{ "COMMONFILTERBUTTONFILTER" | translate }}</button></div></div></div></div>';
            $elm = angular.element(html);
            angular.element(document.body).prepend($elm);

            $compile($elm)($scope);

        };

        $scope.close = function() {
            var columns = $scope.gridApi.selection.getSelectedRows();
            $scope.colFilter.listTerm;
            $scope.colFilter.listTerm = [];
            $scope.filternull="";
            columns.forEach( function( column ) {
                if(column.column==null || column.column=="" )column.column="-";
                $scope.colFilter.listTerm.push( column.column );
            });
            $scope.colFilter.term = $scope.colFilter.listTerm.join(', ');
            if($scope.colFilter.term.length>0)
            {
                $scope.showitem=false;
            }
            else {
                $scope.showitem=true;
            }
            // $scope.colFilter.condition =2;
            if($scope.colFilter.listTerm.length==1)
            {
                $scope.colFilter.condition = uiGridConstants.filter.EXACT;
            }
            else {

                $scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
            }



            if ($elm) {
                $elm.remove();
            }
        };


        $scope.reset = function() {
            var columns = $scope.gridApi.selection.getSelectedRows();
            $scope.colFilter.listTerm = [];
            $scope.filternull="";

            $scope.colFilter.term = "";
            if($scope.colFilter.term.length>0)
            {
                $scope.showitem=false;
            }
            else {
                $scope.showitem=true;
            }
            $scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
            $scope.gridApi.selection.clearSelectedRows();
            if ($elm) {
                $elm.remove();
            }
        };
        if( $scope.showitem==false){
        }
    }).directive('filterCustomModal', function() {


        return {
            restrict: "A",
                template: '<div style="font-size: 14px; padding-right: 0px; padding-bottom: 2px;float: right !important;" ><md-icon class="pull-left" ng-if="showitem" style="font-size: 14px;color: silver;"  ng-click="showFilterModal()">filter_list</md-icon> <md-icon class="pull-left" ng-if="!showitem" style="font-size: 14px;font-weight: bold;color: #008080;" ng-click="showFilterModal()">filter_list</md-icon> </div>',
              controller: 'AppuserColumnFilterModalCtrl',

        };
    });// Appuser Area Controller

}).call(this);

in gridoption:
       Let columndefination:       {
                 field: 'columnname',
                    displayName: 'CONTROLLER_GRID_COLUMNNAME',
                    placeholder: 'CONTROLLER_GRID_COLUMNNAME',
                    headerTooltip:
                        function( col ) {
                            return ' ' + col.displayName;
                        },
                    headerCellFilter: 'translate',
                    filterHeaderTemplate: '<div class="uigrid-customfilter" ng-repeat="colFilter in col.filters"><div filter-custom-modal style="right !important;"></div></div>',
}