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"there 创建了一个选项卡。但是我如何访问这些不同对象的数据，因为我使用uniquefilter 来避免显示双重数据。如何仅从具有属性值"onderwerpen" = chosen tabshow 的对象中获取数据？ 我不确定我的问题是否足够清楚，如果不是，请随时告诉我并询问更多信息。 谢谢。

Answer 1

如 cmets 中所述，您可以使用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查看这个工作示例