Javascript 使用引导选项卡窗格和accordions时发生数据绑定错误

首先，我使用了一个引导手风琴，它根据所有属性

“gebieden”

制作面板。这很有效

在每个面板中，我使用了引导“选项卡”。对于属性为与父面板具有相同值的每个对象，它将创建一个选项卡窗格。这同样有效

这里是我遇到麻烦的地方：在每个选项卡窗格中，我创建了一个表。在此表中，我表示对象的

“data”…

键和val，其中

“onderwerpen”

=所选选项卡的值和

“gebieden”

与所选面板相等

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

在此之前请注意，我没有更改我的json文件，因为它是一个开放的数据集，我从这个URL获得：完整的json

---

为了保持代码简短，但显示问题的本质，这里是我的angular代码，其中包含一部分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/引导代码：

<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>

{{item.gebieden}


我用这把小提琴修复了你的代码。生成
tbody
时，必须设置额外的过滤器。您必须指定要在筛选器中以哪个区域为目标，否则它将同时以“gebieden”为目标。请参见此处的固定小提琴：

这就做到了，因为我还触发了一个函数，当您单击区域选项卡并将其保存在变量中时设置区域

变化：

HTML

  <h4 class="panel-title" ng-click="setRegio(item.gebieden)">
        {{item.gebieden}}
   </h4>

  <tbody ng-repeat="item in All | filter:{gebieden:regio}:true | filter:{onderwerpen:selectedOnderwerpe`n}:true">

  $scope.selectedOnderwerpen = '';
  $scope.regio = '';
  $scope.setOnderwerpen = function(onderwerpen) {
    console.log(onderwerpen);
    $scope.selectedOnderwerpen = onderwerpen;
  }
  $scope.setRegio = function(regio) {
  console.log(regio);
    $scope.regio = regio;
  }