0
首先，我使用的引導手風琴根據屬性"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 /引導代碼：
<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>
對於沒有複製代碼，測試和調試的目的，我創造了這個fiddle