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

Question

所以，我的问题是我有一个从对象数组呈现的表，首先，具有嵌套行的数据加载行。 在用户选择任何行时 - 应加载另一个嵌套行，并隐藏所有其他行。 例如：首先 - 当用户选择第一行时，为 3 个用户加载姓名、custId、移动设备，应显示另一行具有不同信息，而必须隐藏第二行和第三行。

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"
                }],
            }
        ]
});

Answer 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>