使用Bootstrap Tab窗格和手風琴進行數據綁定錯誤

Question

首先，我正在使用引導式手風琴，該手風琴根據屬性為"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>

為了進行測試和調試而不復制代碼，我創建了這個小提琴

Answer 1

我用這個小提琴修復了您的代碼。 生成tbody時，必須設置一個額外的過濾器。 您必須在過濾器中指定要定位的區域，否則將同時定位兩個“ gebieden”。 請在此處查看固定的小提琴： http : //jsfiddle.net/uwpjk28w/30/

這可以解決問題，因為當您單擊region-tab並將其保留在變量中時，我還會觸發一個函數來設置區域。

變化：

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

JS

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