angularjs - 如何在 Angular JS 中迭代 json 对象？

Question

我有 json 对象，我需要以 Angular 迭代该对象。我会告诉你我的问题。我有一个按钮。单击该按钮后，用户可以选择多个元素。我举个例子('a'，'b'，'c'......等等)。当用户选择 'a' 并关闭弹出窗口时，我需要显示此结果。

预期结果 选择“a”时

A // header 
A S //names
A p

当用户选择“A”时，它会从 showTableData 中进行搜索，并在标题下方显示名称:

"A": [
  { "name":"A S"},
  { "name":"A p"}
  ],

当用户选择“A”和“B”时，预期结果:

A                        B // headers

A S                      B BS
A P                      B Bp 

等等..

实际上，如果用户选择任何“A”、“B”、“C”等，我就可以打印标题。我不知道如何在标题下面打印相应的名称。

这是我的代码:http://codepen.io/anon/pen/zGNLdR

     <div class="row">
       <div ng-repeat="d in data">
  <div class="col" ng-show="d.checked">{{d.name}}</div>
       </div>
</div>

还有其他方法可以获取 json 对象来显示预期结果..我可以用 showTabledata 映射不同方式的 data 以便获得预期的结果吗？

  $scope.showTableData={
      "A": [
      { "name":"A S"},
      { "name":"A p"}
      ],
      "B": [
      { "name":"B BS"},
      { "name":"B Bp"}
      ],
       "c": [
      { "name":"c c"},
      { "name":"c c"}
      ],
      "d": [
      { "name":"d dS"},
      { "name":"d dp"}
      ],
      "E":[
      { "name":"E ES"},
      { "name":"E Ep"}
      ]
    };

Answer 1

我认为最简单的解决方案就是添加另一个 div 并在您的 showTableData 变量上进行迭代，但只能通过选定的键进行迭代。

<div ng-repeat="d in data">
  <div class="col" ng-show="d.checked">{{d.name}}</div>
     <div class="col" ng-show="d.checked"
        ng-repeat="nameObject in showTableData[d.name]">

            {{nameObject.name}}

     </div>
</div>

Example on codepen .

有些东西可以重构，但我希望您能明白。

<小时/>

使用过滤器有一个更清洁的解决方案。通过这种方法，您可以删除 ng-repeat 中的 ng-show。

<div ng-repeat="d in data | filter:{checked: true}">
     <div class="col">{{d.name}}</div>
     <div class="col" ng-repeat="nameObject in showTableData[d.name]">

        {{nameObject.name}}

     </div>
</div>

Example .