Hide/Show 行在 ngGrid 中使用勾选按钮 table (AngularJS)

Question

之前可能有人问过，但是我查了问答，没有找到与我的问题相关的答案。所以我正在使用一个 ng-grid table，它在 table 上显示超过 30K 的数据。我显示的数据是来自服务器的，是实时数据。我的 table 中有多个列。有时一行中 3,4 个单元格的值为零。所以我想要一个 tick/untick 按钮，它将根据我的选择 hide/show 那些零单元格。我该怎么做？使用 ng 隐藏？如果是，应该怎么称呼它？如果你给我想法，我将不胜感激。如果您需要，我可以为您提供我的代码。提前致谢！

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>

Answer 1

你可以写一个简单的方法，比如"toogle()"；

你应该检查 this

您还可以找到更多 here 也许你可以在你的控制器中定义这个方法。如你所愿，我的朋友。祝你好运...如果您需要更多帮助，请再次与我联系 ;)

Hide/Show 行在 ngGrid 中使用勾选按钮 table (AngularJS)

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

angularjs

ng-grid

ng-show

angular-ng-if

ng-hide