На рисунке UI Grid website показан пример фильтрации сетки от внешнего источника.
Я создал this example на основе вашего кода и подхода, используемого в приведенной выше ссылке. Это фильтрует сетку на основе выбранных флажков. При запуске сетка настроена на отображение всех данных.
Я изменил свой HTML следующим образом:
<body ng-controller="MainCtrl">
<input type="checkbox" style="inline" ng-model="pass" ng-click="updateSelection()">Pass
<input type="checkbox" style="inline" ng-model="fail" ng-click="updateSelection()">Fail
<input type="checkbox" style="inline" ng-model="notEval" ng-click="updateSelection()">Not Evaluated
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</body>
сковывает флажков атрибутов модели и предоставляет функцию для вызова, когда выберите флажок/снят. атрибут ui-grid теперь привязан к gridOptions, поэтому мы можем предоставить некоторые дополнительные параметры в коде AngularJS.
Код AngularJS был изменен следующим образом:
я. Определить атрибуты для привязки флажков (они инициализируются правда так, что при загрузке сетки отображает все данные):
// Bindings for checkboxes
$scope.pass = true;
$scope.fail = true;
$scope.notEval = true;
II. Определите функцию, которая заставляет обновлять сетку. Это называется всякий раз, когда флажок установлен/снят флажок:
// Function called when a checkbox is checked/unchecked
$scope.updateSelection = function() {
// Refresh the grid (this forces the singleFilter function to be executed)
$scope.gridApi.grid.refresh();
};
iii. Определите следующие gridOptions. onRegisterApi функция позволяет нам получить ссылку на gridApi (так что мы можем ссылаться на нее функции updateSelection выше), а также определяет функцию filterFunction, которая содержит нашу логику для фильтрации сетки:
$scope.gridOptions = {
//enableFiltering: false,
//
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor($scope.filterFunction, 200);
},
};
внутривенно. Затем мы можем определить filterFunction, который содержит логику для фильтрации сетки на основе флажка (ов), выбранный:
$scope.filterFunction = function(renderableRows){
// Build a list of valid values for the 'status' column based on the checkboxes that are checked
var validValues = [];
if ($scope.pass) {
validValues.push('Pass');
}
if ($scope.fail) {
validValues.push('Fail');
}
if ($scope.notEval) {
validValues.push('Not Evaluated');
}
// Iterate over each grid row
renderableRows.forEach(function(row) {
var match = false;
// the 'status' column value for this row is one of the ones the user has selected based on the checkboxes
if (validValues.indexOf(row.entity.status) > -1) {
match = true;
}
// Hide any rows which have been filtered out
if (!match){
row.visible = false;
}
});
// Return the rows to render in the grid (this will contain all rows, but only the ones where 'visible' = true will be rendered)
return renderableRows;
};
Может ли вы поделиться какими-то коды или plunkr, чтобы показать, что вы пытаетесь достичь, и что не работаем – Bhavjot