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コードにいくつかの追加パラメータを指定できます。
I：次のように
AngularJSコードが変更されています。チェックボックスをバインドする属性を定義します（ロード時にグリッドがすべてのデータを表示するように、これらは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機能は、私たちは（私たちは上記updateSelection機能でそれを参照できるように）gridApiへの参照を取得することができますし、また、グリッドをフィルタリングするために、当社のロジックが含まれ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