ng-repeat用于具有不同值的各种json对象

Question

这是问题所在。 我有这个开发不好的json文件，其中每个区域有3个不同的对象。 这是一个例子。

{
    "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"
}

注意到这些3个对象如何拥有该属性的值相同"gebieden" ，但该属性的不同值"onderwerpen"现在我已成功地显示出这样的手风琴组的所有领域：

 <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}}">
                            <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="item in All | unique:'onderwerpen'">
                                        <a data-toggle="tab" href="#{{item.onderwerpen}}">
                                            {{item.onderwerpen}}
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content" style="padding:2%">
                                    <div id="{{item.onderwerpen}}" class="tab-pane fade in active">
                                        <table class="table table-bordered text-center">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Jaar</th>
                                                    <th class="text-center">Waarde</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="(key,val) in item | comparator" ng-hide="$index<2" >
                                                    <td>{{key}}</td>
                                                    <td>{{val}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

正如您所看到的，我已经为面板主体实现了一个选项卡布局，并设法为整个JSON中的每个值"onderwerpen"创建一个选项卡。 但是我如何访问这些不同对象的数据，因为我使用unique过滤器来避免显示双重数据。 如何只使用属性值"onderwerpen" = chosen tab显示来自对象的数据？ 我不确定我的问题是否足够清楚，如果不是毫不犹豫地告诉我并询问更多信息。 谢谢。

Answer 1

如评论中所述，您可以使用filter器根据单击的选项卡过滤掉对象。 这是一个工作小提琴，根据点击的标签显示属性 - http://jsfiddle.net/uwpjk28w/12/

所以，基本上我添加了一个更改onderwerpen属性的ng-click函数。

<a data-toggle="tab" ng-click="setOnderwerpen(item.onderwerpen)">
     {{item.onderwerpen}}
</a>

更改onderwerpen的功能：

 $scope.selectedOnderwerpen = '';
 $scope.setOnderwerpen = function (onderwerpen) {
        $scope.selectedOnderwerpen = onderwerpen;
 }

和过滤器：

<tbody ng-repeat="item in All | filter {onderwerpen:selectedOnderwerpen}:true">
      <tr ng-repeat="(key,value) in item" ng-show="$index < 7">
           <td>{{key}}</td>
           <td>{{value}}</td>
      </tr>
</tbody>

此外，使用ng-show仅在选择了选项卡时显示表格。

ng-show="selectedOnderwerpen!=''" 

希望这个答案有所帮助

Answer 2

我想我可以像这样修改json：

{
   "gebieden":"Antwerpen",
   "onderwerpen":"Gemiddeld netto inkomen per belastingsplichtige",
   "data":{
      "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":{
      "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":{
      "data_2005":"129568",
      "data_2006":"137614",
      "data_2007":"141273",
      "data_2008":"142771",
      "data_2009":"146058",
      "data_2010":"151516",
      "data_2011":"151674"
   }
}

您可以以一种好的方式获取数据：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body >
    <div class="panel-group" id="accordion" ng-controller="mainCtrl">
                    <div class="panel panel-default" ng-repeat="item in All">
                        <div class="panel-heading text-center" data-toggle="collapse" data-parent="#accordion" id="{{item.gebieden}}" href="#{{$index}}">
                            <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>
                                        <a data-toggle="tab" href="#{{item.onderwerpen}}">
                                            {{item.onderwerpen}}
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content" style="padding:2%">
                                    <div id="{{item.onderwerpen}}" class="tab-pane fade in active">
                                        <table class="table table-bordered text-center">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Jaar</th>
                                                    <th class="text-center">Waarde</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="(key,val) in item.data" ng-hide="$index<2" >
                                                    <td>{{key}}</td>
                                                    <td>{{val}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

  </body>

</html>

在plunker上查看这个工作示例