Angularjs ui网格多个过滤器来自网格外的复选框_Angularjs_Angular Ui Grid_Angular Filters

Angularjs ui网格多个过滤器来自网格外的复选框

angularjs

Angularjs ui网格多个过滤器来自网格外的复选框,angularjs,angular-ui-grid,angular-filters,Angularjs,Angular Ui Grid,Angular Filters,我正在使用UIGrid。我希望能够根据复选框输入（在网格之外）筛选影响级别列。可以选择多个复选框。有关如何实现这一点的任何帮助谢谢你的帮助 <body ng-controller="MainCtrl"> <input type="checkbox" style="inline">Pass <input type="checkbox" style="inline">Fail <input type="checkbox" style="inline">

我正在使用UIGrid。我希望能够根据复选框输入（在网格之外）筛选影响级别列。可以选择多个复选框。有关如何实现这一点的任何帮助

谢谢你的帮助

<body ng-controller="MainCtrl">
<input type="checkbox" style="inline">Pass
<input type="checkbox" style="inline">Fail
<input type="checkbox" style="inline">Not Evaluated


通过
失败
未评估

我添加了一个plunker：

我想根据选中的复选框过滤状态列，并且可以选择多个复选框。

显示了从外部源过滤网格的示例

我已经根据您的代码和上面链接中使用的方法创建了。这将根据选中的复选框过滤网格。启动时，网格设置为显示所有数据

我对您的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>

二,。定义强制刷新网格的函数。无论何时选中/取消选中复选框，都会调用此选项：

// 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.定义以下

网格选项

。

onRegisterApi

函数允许我们获取对

gridApi

的引用（以便我们可以在上面的

updateSelection

函数中引用它），还定义了

filterFunction

函数，该函数包含过滤网格的逻辑：

$scope.gridOptions = {
    //enableFiltering: false,
    //
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
      $scope.gridApi.grid.registerRowsProcessor( $scope.filterFunction, 200 );
    },
 };

iv.然后，我们可以定义一个

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来展示你想要达到的目标和没有达到的目标吗

$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;
};