Question

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

预期结果 when 'a' is selected

A // header 
A S //names
A p

当用户选择＆＃39; A＆＃39;它从 showTableData 搜索并显示标题下面的名称：

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

当用户选择＆＃39; A＆＃39;和＆＃39; B＆＃39;然后预期结果：

A                        B // headers

A S                      B BS
A P                      B Bp

等......

实际上，如果用户选择任何东西，我就可以打印标题＆＃39; A＆＃39; 。＆＃39; B＆＃39;，＆＃39; C＆＃39;等等。我不知道如何在标题下方打印相应的名称。

这是我的代码：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 以不同的方式映射数据，以便获得预期的结果吗？

  $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-show内的ng-repeat。

<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

如何在角度js中迭代json对象？

1 个答案: