使用 ngGrid 表中的刻度按钮隐藏/显示行（AngularJS）答案

【问题标题】：Hide/Show rows using tick button in ngGrid table (AngularJS)使用 ngGrid 表中的刻度按钮隐藏/显示行（AngularJS）
【发布时间】：2015-07-16 09:35:39
【问题描述】：

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

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>

【问题讨论】：

标签： angularjs ng-grid ng-show angular-ng-if ng-hide

【解决方案1】：

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

你应该检查this

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

【讨论】：