单击时Bootstrap折叠关闭其他

时间:2015-05-07 15:07:16

标签: angularjs twitter-bootstrap

我在表格中使用AngularJS中的ng-repeat

当我点击一行时,此行下方会显示数据。

问题在于,当我已经展开其中一行时,我会点击另一行,两者都会展开。 我想关闭第一个并扩展第二个。

HTML

  <div id="accordion">
        <table class="table table-striped">
        <thead>
            <tr>
                <th class="col-md-10">Name</th>
                <th class="col-md-1">Collateral</th>
                <th class="col-md-1"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat-start="pack in packages | filter:search" id="row">
                <td data-toggle="collapse" data-target="#collapse{{$index}}" data-parent="#accordion" ng-click="expand(pack)">{{pack.name}}</td>
                <td><button class="btn btn-info"><span class="glyphicon glyphicon-open-file"></span></button></td>
                <td><input type="radio" ng-model="$parent.selectedPackage" ng-value="pack" /></td>
            </tr>

            <tr ng-repeat-end>
                <td colspan="3">
                    <div class="collapse" id="collapse{{$index}}">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td>{{indication}}</td>
                                </tr>
                                <tr ng-repeat="bb in bananas">
                                    <td>{{bb.name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

1 个答案:

答案 0 :(得分:0)


首先,您不需要具有唯一身份证明的身份......
只需尝试使用https://github.com/angular-ui/bootstrap/tree/master/src/collapse或在您的情况下:https://github.com/angular-ui/bootstrap/tree/master/src/accordion

祝你好运。