Question

我有一个带子div的div来创建一个嵌套的网格系统。共有三个级别：

MainDiv - 始终可见
SecondDiv - 单击MainDiv时显示或隐藏

ThirdDiv - 单击SecondDiv时显示或隐藏

<div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
    <div class="row">
        <div class="col col-75" >
            Department / Product Type
        </div>
        <div class="col col-25">
            Qty
        </div>
    </div>

    <div ng-repeat="item in departments | orderBy:'-qty'" style="padding:0px;margin: 0;">
        <div class="row" ng-class-odd="'odd'" ng-class-even="'even'">
            <div class="col col-75" style="padding:0;margin:0;">
                {{item.departmentName}} - {{item.productTypeName}} - Need Click here
            </div>
            <div class="col col-25" align="center" valign="middle" style="font-size: 14px;font-weight:bold;padding:0;margin:0;">
                {{item.qty}}
            </div>
        </div>
        <div ng-repeat="style in item.styles" style="padding:0;margin: 0;">
            <div class="row">
                <div class="col" style="margin-left: 5% !important;border-top-width:0;border-bottom-width:0;">
                    {{style.styleNum}} ({{style.qty}}) - Need Click here
                </div>
            </div>
            <div class="row" ng-attr-id="{{ 'level-2-' + $index }}">
                <div class="col col-5" style="border:0"></div>
                <div class="col col-5" style="border-left:0;border-bottom:0;border-right:0;"></div>
                <div class="col col-25">Color</div>
                <div class="col col-25">Size</div>
                <div class="col">Product#</div>
            </div>
            <div ng-repeat="styleLine in style.details">
                <div class="row">
                    <div class="col col-10" style="border:0;"></div>
                    <div class="col col-25">{{styleLine.color}}</div>
                    <div class="col col-25">{{styleLine.size}}</div>
                    <div class="col">{{styleLine.productNum}}</div>
                </div>
            </div>

        </div>
    </div>
</div>

现在我需要在div上添加一个click事件来显示隐藏必要的嵌套div。

Plunker：http://plnkr.co/z3RiV6cDFC6YjrbuqxN9

Answer 1

使用 ng-init 和 ng-click 的通用示例：

在ng-repeat中显示/隐藏嵌套Div

1 个答案: