使用引导选项卡窗格和折叠项的数据绑定错误

首先，我使用引导手风琴，它根据所有具有属性"gebieden"的项目制作面板。这行得通。

在每个面板中，我都使用了引导程序"选项卡"。对于具有属性"onderwerpen"的每个对象，"gebieden"具有与父面板具有相同值的对象，它将创建一个选项卡窗格。这也行得通

这是我遇到麻烦的地方：在每个选项卡窗格中，我制作了一个表格。在此表中，我表示对象的"data_..."键和值，"onderwerpen" = 所选选项卡的值，"gebieden"等于所选面板。

相反，当我选择一个选项卡时，它将为它在整个 json 中找到的每个键、val 数据制作一个巨大的表。

在此之前，请注意，我无法更改我的 json 文件，因为它是我从此 URL 获得的开放数据集：http://datasets.antwerpen.be/v1/bevolking/inkomensvolgenswoonplaatsperdistrict.json 完整的 json。

为了保持代码简短但显示问题的本质，这里是我的角度代码，其中一部分是 json 硬编码的。

    var myApp = angular.module('myApp', ['ui.directives', 'ui.filters']);
function TodoCtrl($scope) {
  $scope.All = [{
    "gebieden": "Antwerpen",
    "onderwerpen": "Gemiddeld netto inkomen per belastingsplichtige",
    "data_2005": "15084,8252887",
    "data_2006": "14935,2782929",
    "data_2007": "15353,0192747",
    "data_2008": "16040,981705",
    "data_2009": "16050,4881554",
    "data_2010": "15777,0232385",
    "data_2011": "16487,8501985"
  }, {
    "gebieden": "Antwerpen",
    "onderwerpen": "Mediaan netto inkomen",
    "data_2005": "11424",
    "data_2006": "11194",
    "data_2007": "11445",
    "data_2008": "12208",
    "data_2009": "12316",
    "data_2010": "12211",
    "data_2011": "12788"
  }, {
    "gebieden": "Antwerpen",
    "onderwerpen": "Aantal belastingsplichtigen",
    "data_2005": "129568",
    "data_2006": "137614",
    "data_2007": "141273",
    "data_2008": "142771",
    "data_2009": "146058",
    "data_2010": "151516",
    "data_2011": "151674"
  }, {
    "gebieden": "Berendrecht Zandvliet Lillo",
    "onderwerpen": "Gemiddeld netto inkomen per belastingsplichtige",
    "data_2005": "17964,3232747",
    "data_2006": "18305,3691146",
    "data_2007": "19107,6217867",
    "data_2008": "20194,2855521",
    "data_2009": "20621,9054989",
    "data_2010": "20957,2239214",
    "data_2011": "21960,7057272"
  }, {
    "gebieden": "Berendrecht Zandvliet Lillo",
    "onderwerpen": "Mediaan netto inkomen",
    "data_2005": "15002",
    "data_2006": "15230",
    "data_2007": "15962",
    "data_2008": "17022",
    "data_2009": "17477",
    "data_2010": "17724",
    "data_2011": "18685"
  }, {
    "gebieden": "Berendrecht Zandvliet Lillo",
    "onderwerpen": "Aantal belastingsplichtigen",
    "data_2005": "7622",
    "data_2006": "7816",
    "data_2007": "7858",
    "data_2008": "7925",
    "data_2009": "7947",
    "data_2010": "8043",
    "data_2011": "7962"
  }];
  $scope.selectedOnderwerpen = '';
  $scope.setOnderwerpen = function(onderwerpen) {
    console.log(onderwerpen);
    $scope.selectedOnderwerpen = onderwerpen;
  }
}

这是我的 HTML/Bootstrap 代码：

<div class="panel-group" id="accordion">
                        <div class="panel panel-default" ng-repeat="item in All | unique:'gebieden'">
                            <div class="panel-heading text-center" data-toggle="collapse" data-parent="#accordion" id="{{item.gebieden}}" href="#{{$index}}" ng-click="setGebied(item.gebieden)">
                                <h4 class="panel-title">
                                    {{item.gebieden}}
                                </h4>
                            </div>
                            <div id="{{$index}}" class="panel-collapse collapse ">
                                <div class="panel-body text-center">
                                    <ul class="nav nav-tabs">
                                        <li ng-repeat="sub in All | unique:'onderwerpen'">
                                            <a data-toggle="tab" ng-click="setOnderwerpen(sub.onderwerpen)">
                                                {{sub.onderwerpen}}
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content" style="padding:2%">
                                        <div id="{{item.onderwerpen}}" class="tab-pane fade in active">
                                            <table ng-show="selectedOnderwerpen!=''" class="table table-bordered text-center">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center">Jaar</th>
                                                        <th class="text-center">Waarde</th>
                                                    </tr>
                                                </thead>
                                                <tbody ng-repeat="item in All | filter:{onderwerpen:selectedOnderwerpen}:true">
                                                    <tr ng-repeat="(key,value) in item" ng-hide="$index <2">
                                                        <td>{{key}}</td>
                                                        <td>{{value}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

为了在不复制代码的情况下进行测试和调试，我创建了这个小提琴