javascript - Angular UI-Grid 自定义过滤器按钮

Question

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

过滤器输入可用，但过滤器按钮尚不可用。是否可以实用地拥有一个过滤器按钮？

Plunker:http://plnkr.co/edit/R6PhMiBbaeqj9ErjdvY1?p=preview

HTML:

<div ng-controller="MainCtrl">

  <p><button ng-click='filterBtn()'>Filter for "Company = Mixers"</button></p>

  <p><input ng-model='filterValue'/><button ng-click='filter()'>Filter</button></p>

  <div id="grid1" ui-grid="gridOptions" class="grid"></div>

</div>

JS:

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

Answer 1

好的，我让它可以同时使用两个按钮:

http://plnkr.co/edit/25r5aBC0wAtDTEE8gOcO?p=preview

$scope.filterText = '';

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

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