javascript - 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" 的值不同现在我已经成功地展示了 Accordion 组中的所有区域，如下所示:

 <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 根据单击的选项卡过滤掉对象。这是一个工作 fiddle ，它根据单击的选项卡显示属性 - 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!=''" 

希望这个回答对您有所帮助。