angularJS Do Not Display A Row Depending On Value In An NG-Grid

Question

I am new to angularJS ad I have been asked to hide a row in my ng-grid table if a value of a column is '0'.

My grid has 4 columns:

• User
• Today
• This Week
• This Month

And I want to hide an entire row if 'This Month' column is '0'

My HTML for the gird is:

<div data-ng-controller="workflowworkitemscompleted as vm">
    <div data-ng-if="isbusy">
        <div data-cc-spinner="vm.spinnerOptions"></div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="gridStyle" style="height:157px" data-ng-grid="gridOptions" id="cwigrid"></div>
        </div>
    </div>
</div>

My controller code is:

$scope.searchfilter = "";
    $scope.mySelections = [];
    $scope.sortInfo = { fields: ['countDay'], directions: ['desc'] };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [5],
        pageSize: 5,
        currentPage: 1
    };

    $scope.gridOptions = {
        data: 'wfiprocessed',
        multiSelect: false,
        rowHeight: 25,
        showFooter: false,
        footerRowHeight: 40,
        enableColumnReordering: false,
        showColumnMenu: false,
        enableColumnResize: false,
        enableRowSelection: false,
        filterOptions: $scope.filterOptions,
        selectedItems: $scope.mySelections,
        enablePaging: false,
        pagingOptions: $scope.pagingOptions,
        plugins: [gridLayoutPlugin],
        totalServerItems: 'totalServerItems',
        sortInfo: $scope.sortInfo,
        useExternalSorting: false,
        virtualizationThreshold: 50,
        rowTemplate: "<div ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" class=\"ngCell {{col.colIndex()}} {{col.cellClass}}\">" +
            "   <div class=\"ngVerticalBar\" ng-style=\"{height: rowHeight}\" ng-class=\"{ ngVerticalBarVisible: !$last }\">&nbsp;</div>" +
            "   <div ng-cell></div>" +
            "</div>",
        columnDefs: [
            { field: 'userName', displayName: 'User', cellTemplate: vm.optimizedcell },
            { field: 'countDay', displayName: 'Today', cellTemplate: vm.optimizedcell },
            { field: 'countWeek', displayName: 'This Week', cellTemplate: vm.optimizedcell },
            { field: 'countMonth', displayName: 'This Month', cellTemplate: vm.optimizedcell }
        ]
    };

And my table looks like:

Looking at the table above, I don't want the 'dtealdev' or 'qauser2' rows to be displayed as the 'This Month' column is '0'

Answer 1

In your data source of $scope.gridOptions you feed all the dataset you want to show in the grid. What you are doing is, you are passing the undesirable field ie, qauser2 and dtealedev in this data set too.

What you can do is return only the desired set of data values that need to show.

$scope.gridOptions.data = function(data) {
    //remove the items in data that contain 0 in all fields

    return newData;
}