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>

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

Answer 1

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

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

<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

上查看此工作示例

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

2 个答案: