使用按钮的角度用户界面网格过滤器
问题描述:
使用角度用户界面网格http://ui-grid.info/docs/#/tutorial/321_singleFilter,我希望只有一个按钮来过滤“Company = Mixers”。该过滤器使用输入工作,但如何将单个过滤器应用于按钮?使用按钮的角度用户界面网格过滤器
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.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'
};
};
http://ui-grid.info/docs/#/tutorial/321_singleFilter:我使用的是Angular UI网格,而不是Kendo。什么是“运营商”? – simple
对不起,我dindt注意到这个问题关于角网格)我没有与该网格工作,但谷歌说,做过滤的方式 –
@simple你试试这个吗? stiil有问题吗? –