如何基于ng-click在表中的ng-repeat中隐藏或显示一条记录？

隐藏或显示表中特定记录的方式类似于隐藏或显示DOM中任何元素的方式。想到的基本和第一件事是ng-show和ng-hide指令，它们根据绑定到它们的表达式的二进制结果分别显示或隐藏。另一种方法可以是使用
ng-if在一般编程中像if块一样工作。如果表达式为true，则该元素可见或不可见。
可以通过ng-click命令轻松地控制此操作，该命令可用于调用函数或运行一段操作布尔表达式中存在的实体的代码。

方法1：仅当绑定到ng-show的表达式为true时，tr元素才可见。
在此示例中将ng-hide注释掉，但它的工作方式与ng-show相同。不同之处在于，如果布尔表达式给出一个真值，它将隐藏tr元素。
ng-show和ng-hide指令都可以具有常规函数调用，但它们应返回布尔值。

句法：

< tr ng-repeat="x in [some list]" ng-show="[some boolean expression]" > < tr >
< tr ng-repeat="x in [some list]" ng-hide="[some boolean expression]" > < tr >

例子：

  

    
      Angular show hide table element on click
  
    
    

  

    
        
          Show People Present
      
        
          Show People Absent
      
        
            
                
                
            
            
            
            
                
                
            
        NameAge{{p.name}}{{p.Age}}
    
    
        var app = angular.module("mainApp", []);
        app.controller("MyCtrl", function($scope) {
            $scope.flag = 1;
            $scope.people = [{
                name: "GeekAgashi",
                Age: 12,
                attended: 1
            }, {
                name: "GeekSatoshi",
                Age: 16,
                attended: 0
            }, {
                name: "GeekNakumato",
                Age: 14,
                attended: 1
            }];
            $scope.showPresent = function() {
                $scope.flag = 1;
            };
            $scope.showAbsent = function() {
                $scope.flag = 0;
            };
        });
    
  

  

输出：

• 单击“显示有人出席”时，对于所有有人照值与标记值匹配的对象，其boolean为true，因为通过ng-click调用将其变为1：
  
• 单击“显示缺席的人”时，对于所有有人照值与标志值匹配的对象，其boolean为true，因为通过ng-click调用将其更改为0：
  

方法2：在这里，我们使用ngIf来显示或隐藏表的记录。代码几乎一样，工作也几乎一样。但是ngIf的可靠性不如ng-show或ng-hide，但它的作用是将DOM中的元素完全删除。

Syantax：

< tr ng-repeat="x in [some list]" ng-if="[some boolean expression]" > < tr >

例子：

  

    Angular show or hide element on click
    
    

  

    
        
          Show People Present
      
        
          Show People Absent
      
        
            
                
                
            
            
            
                
                
            
        NameAge{{p.name}}{{p.Age}}
    
    
        var app = angular.module("mainApp", []);
        app.controller("MyCtrl", function($scope) {
            $scope.flag = 1;
            $scope.people = [{
                name: "GeekAgashi",
                Age: 12,
                attended: 1
            }, {
                name: "GeekSatoshi",
                Age: 16,
                attended: 0
            }, {
                name: "GeekNakumato",
                Age: 14,
                attended: 1
            }];
            $scope.showPresent = function() {
                $scope.flag = 1;
            };
            $scope.showAbsent = function() {
                $scope.flag = 0;
            };
        });
    
  

  

输出：

• 输出保持相同，因为它们都以相同的方式工作：
  
•