使用按钮的角度用户界面网格过滤器

问题描述:

使用角度用户界面网格http://ui-grid.info/docs/#/tutorial/321_singleFilter,我希望只有一个按钮来过滤“Company = Mixers”。该过滤器使用输入工作,但如何将单个过滤器应用于按钮?使用按钮的角度用户界面网格过滤器

Plunkerhttp://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.filterBtn = function(val) { 
    // filter for "Company = Mixers" only. 
    $scope.gridApi.grid.dataSource.filter({ 
     field: "company", 
     operator: "eq", 
     value: "Mixers" //or val 
    }); 
}; 

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

你需要的是编程方式添加过滤器网格:

$scope.filterBtn = function(val) { 
    $scope.gridApi.grid.columns['Company'].filters[0] = { 
         term: 'mixers' 
     }; 

    }; 

Here some related question

+0

http://ui-grid.info/docs/#/tutorial/321_singleFilter:我使用的是Angular UI网格,而不是Kendo。什么是“运营商”? – simple

+0

对不起,我dindt注意到这个问题关于角网格)我没有与该网格工作,但谷歌说,做过滤的方式 –

+0

@simple你试试这个吗? stiil有问题吗? –