在可折叠面板中显示不同的数据

时间:2018-06-28 05:51:09

标签: javascript angularjs twitter-bootstrap

我正在动态地将数据显示到多个可折叠面板主体中,以在单击时将单个数据显示到每个主体中,但是每次单击都会以某种方式共享每个面板的相同数据。

我想做的是显示每个项目的单独数据。这是我编写的示例代码。

<span ng-repeat="t in tabledata">
                <div class="bs-example">
                    <div class="panel-group" id="accordion">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#{{t.appSystemName}}">
                                        <table class="table borderless">
                                            <tr>
                                                <td>
                                                    <span class="glyphicon glyphicon-plus"
                                                        ng-click="getDataForProdQa(t.appSystemName)"
                                                        ng-model="plus">
                                                    </span>
                                                </td>
                                                <td>{{t.dbName}}</td>
                                                <td>{{t.appSystemName}}</td>
                                                <td>{{t.Id}}</td>
                                                <td>{{t.frequency}}</td>
                                                <td>{{t.timeStamp}}</td>
                                            </tr>
                                        </table>
                                    </a>
                                </h4>
                            </div>
                        </div>
                        <div id="{{t.appSystemName}}" class="panel-collapse collapse">
                            <div class="panel-body">
                                <table class="table table-responsive" >
                                    <tr ng-repeat="i in innertabledata">
                                        <td>{{i.dbName}}</td>
                                        <td ng-model="check">{{i.appSystemName}}</td>
                                        <td>{{i.Id}}</td>
                                        <td>{{i.frequency}}</td>
                                        <td>{{i.timeStamp}}</td>
                                    </tr>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </span>

寻求一些帮助来解决此问题

1 个答案:

答案 0 :(得分:0)

只需尝试使ng-repeat下的id =“ accordion”动态化,并且每次重复相同的id。因此,使动态id如id =“ accordion {{$ index}}”“和数据父级使其动态化。希望有帮助。 谢谢