Search code examples
angularjsng-gridng-showangular-ng-ifng-hide

Hide/Show rows using tick button in ngGrid table (AngularJS)

it may be asked by someone before, but I checked Q&As and could not find the relevant answer for my question. So I am using an ng-grid table, which displays more than 30K data on that table. The data that I display is coming from the server, it is a real-time data. I have multiple columns in my table. Sometimes the value of 3,4 cells in one row are zero. So I want to have a tick/untick button, which which will hide/show those zero cells based on my choice. How can I do it? Using ng-hide? if yes, how should call it? I would appreciate, if you gave me ideas. I can provide you my code, if you need so. Thanks in advance!

js

app.controller('MyController', function ($scope, Stream, liveData) {

$scope.myData = liveData.myData;
$scope.$apply();
};

    Stream.start();

    var customCell = '<div ng-class="{red: row.getProperty(col.field) < 0, blue: row.getProperty(col.field) > 0 , black: row.getProperty(col.field) == 0}"><div class="ngCellText">{{row.getProperty(col.field) | number | replace}}</div></div>';
    $scope.gridOptions = {
        data: 'myData',
        showFilter: true,
        showColumnMenu: true,
        showFooter: true,

    columnDefs: [
            {
                field: 'name',
                displayName: 'Name',
                cellClass: 'text-center',

            },

            {
                field: 'amountSent',
                displayName: 'Amount Sent',
                cellClass: 'text-center'
            },  

            {
                field: 'amountReceived',
                displayName: 'Amount Received',
                cellClass: 'text-center'
            },
                field: 'currentBalance',
                displayName: 'Current balance',
                cellTemplate: customCell,
                cellClass: 'text-right'
     ],

    };

});

html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Table">
<head>
    <title>Payments</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="/Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/Content/ng-grid.min.css" />
    <link rel="stylesheet" type="text/css" href="/Content/indexStyle.css" />

</head>

<body>        
    <div ng-view></div>
    <h1>Payment Table</h1>
    <div class="gridStyle" ng-grid="gridOptions"></div>

    <script src="/Scripts/jquery-1.11.3.min.js"></script>
    <script src="/Scripts/jquery.color-2.1.2.min.js"></script>
    <script src="/Scripts/json2.js"></script>
    <script src="/Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="/Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-route.js"></script>
    <script src="/Scripts/angular-animate.js"></script>
    <script type="text/javascript" src="/Jscript/app.js"></script>
    <script src="/Jscript/MyController.js"></script>
    <script src="/Scripts/ng-grid.min.js"></script>
</body>
</html>
Solution

  • You can write a simple method like "toogle()";

    You should check this

    And you can find more here Maybe you can define this method in your controller. As you wish my friend. Good luck... If you need more help contact me again ;)