Angularjs - 检查单选按钮时显示/隐藏表格行

Posted 2023-05-09

【中文标题】Angularjs - 检查单选按钮时显示/隐藏表格行

【英文标题】：Angularjs - show/ hide table row on check of radio button

【发布时间】：2021-01-10 10:03:59

【问题描述】：

所以，我的问题是我有一个从对象数组呈现的表，首先，具有嵌套行的数据加载行。在用户选择任何行时 - 应该加载另一个嵌套行，并且应该隐藏所有其他行。例如：首先 - 当用户选择第一行时，会为 3 个用户加载名称、custId、mobile

html：

<div class="row au-grid-row">
    <div class="col-sm-1">
        ACTION
    </div>
    <div class="col-sm-4">
        NAME
    </div>
    <div class="col-sm-4">
        CUSTOMER ID (CDIF)
    </div>
    <div class="col-sm-3">
       MOBILE NO.
    </div>
</div>

<div ng-repeat="x in customerList>
<div class="row text-center">

    <div class="col-sm-1">
        <input type="radio" class="badge-slider" name="customerInfo" id="custInfo">

    </div>
    <div class="col-sm-4">
        x.FullName
    </div>
    <div class="col-sm-4">
        x.Customerid
    </div>
    <div class="col-sm-3">
        x.Mobile
    </div>

</div>
<hr>
<div class="row text-center " ng-repeat="f in x.accountList" >
    <div class="col-sm-2 col-sm-offset-1">
        <input type="radio" name="accountInfo" id="accInfo">
    </div>
    <div class="col-sm-4">
        f.accountNumber
    </div>
    <div class="col-sm-4">
        f.accountType
    </div>
</div>
<hr>
</div>

AngularJS：

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) 

$scope.customerList = [
            
                "Customerid": "111111",
                "FullName": "CHINTAN MATHUKIA",
                "Mobile": "9999999999",
                "accountList": [
                    "accountNumber": "131212121212121311",
                    "accountType": "Savings"
                ,
                
                    "accountNumber": "242525626262662622222",
                    "accountType": "Current"
                ],
            ,
            
                "Customerid": "222222",
                "FullName": "SMRITI SETHI",
                "Mobile": "9818842804",
                "accountList": [
                    "accountNumber": "333333333333",
                    "accountType": "Savings"
                ,
                
                    "accountNumber": "444444444444",
                    "accountType": "Current"
                ],
            ,
            
                "Customerid": "3333333",
                "FullName": "GAUTAM RANA",
                "Mobile": "99999999999",
                "accountList": [
                    "accountNumber": "4444444444444",
                    "accountType": "Savings"
                ,
                
                    "accountNumber": "4545454545454545",
                    "accountType": "Current"
                ],
            
        ]
);

【参考方案1】：

要在 Angularjs 中显示/隐藏元素，您可以使用 ng-show 指令，表达式计算为 true 或 false。

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) 

  $scope.customerList = [
      "Customerid": "111111",
      "FullName": "CHINTAN MATHUKIA",
      "Mobile": "9999999999",
      "accountList": [
          "accountNumber": "131212121212121311",
          "accountType": "Savings"
        ,
        
          "accountNumber": "242525626262662622222",
          "accountType": "Current"
        
      ],
    ,
    
      "Customerid": "222222",
      "FullName": "SMRITI SETHI",
      "Mobile": "9818842804",
      "accountList": [
          "accountNumber": "333333333333",
          "accountType": "Savings"
        ,
        
          "accountNumber": "444444444444",
          "accountType": "Current"
        
      ],
    ,
    
      "Customerid": "3333333",
      "FullName": "GAUTAM RANA",
      "Mobile": "99999999999",
      "accountList": [
          "accountNumber": "4444444444444",
          "accountType": "Savings"
        ,
        
          "accountNumber": "4545454545454545",
          "accountType": "Current"
        
      ],
    
  ]
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="row au-grid-row">
    <div class="col-sm-1">
      ACTION
    </div>
    <div class="col-sm-4">
      NAME
    </div>
    <div class="col-sm-4">
      CUSTOMER ID (CDIF)
    </div>
    <div class="col-sm-3">
      MOBILE NO.
    </div>
  </div>

  <div ng-repeat="x in customerList">
    <div class="row text-center">

      <div class="col-sm-1">
        <input type="radio" class="badge-slider" name="customerInfo" id="custInfo" ng-value="x.Customerid" ng-model="$parent.selected">

      </div>
      <div class="col-sm-4">
        x.FullName
      </div>
      <div class="col-sm-4">
        x.Customerid
      </div>
      <div class="col-sm-3">
        x.Mobile
      </div>

    </div>
    <hr>
    <div class="row text-center " ng-repeat="f in x.accountList" ng-show="x.Customerid == $parent.selected" >
      <div class="col-sm-2 col-sm-offset-1">
        <input type="radio" name="accountInfo" id="accInfo">
      </div>
      <div class="col-sm-4">
        f.accountNumber
      </div>
      <div class="col-sm-4">
        f.accountType
      </div>
    </div>
    <hr>
  </div>

</div>

【讨论】：

您好，感谢您的回答，但它有点不完整。我想要的是 - 如果我选择 Chintan 的记录，那么应该隐藏带有 smriti 和 gautam 的行。

然后将hide-show 逻辑移动到主要的ng-repeat。应该这样做。

顺便说一句，如果你选择了chintan的记录，那么你将如何选择smriti和gautam的记录，因为它们会被隐藏？