使用bootstrap javascript可折叠面板停止页面刷新

Question

我有一个简单的玉模板，如 -

div(ng-if="items.length!=0")
            .panel-group(ng-repeat="item in items",ng-model="item",id="{{item.ad._id}}")
                .panel.panel-default
                    .panel-heading
                        h4.panel-title
                            a(data-toggle="collapse",data-parent="#{{item.ad._id}}",ng-href="#{{item.ad.adId}}") {{item.ad.title}}
                    .panel-collapse.collapse.in(id="{{item.ad.adId}}")
                        .panel-body.
                            {{item.ad.description}}
                .panel.panel-default(ng-repeat="bid in item.bids")
                    .panel-heading
                        h4.panel-title
                            a(data-toggle="collapse",data-parent="#{{item.ad._id}}",ng-href="#{{bid.bidId}}") Bid by: {{bid.bidderId}} At {{bid.bid}}
                    .panel-collapse.collapse(id="{{bid.bidId}}")
                        .panel-body
                            a.pull-left.btn.btn-primary Accept
                            a.pull-right.btn.btn-primary Reject

数据集项来自每次重新加载页面时从页面控制器调用的$ http方法。

在这里，每次我点击任何面板时，页面都会发出新请求并重新加载。我该如何防止这种情况发生？

下面附有正在发生的事情的屏幕截图，以更详细地解释问题 -