使用垂直表嵌套 ng-repeat答案

【问题标题】：Nested ng-repeat with vertical table使用垂直表嵌套 ng-repeat
【发布时间】：2016-06-16 06:04:10
【问题描述】：

我有一个 json 数组，其中包含 x 个元素，其中每个元素都是另一个 json 数组。我想使用嵌套的ng-repeat 来迭代这个数组，比如nested ng-repeat。

我的问题是我想在“垂直表”中做：

<!-- for the big json -->
<table ng-repeat = "obj in data "style="width:100%">
  <tr>
    <th>data01</th>
    <!--for thr first object in the big json -->
    <tr ng-repeat = "var in obj">{{var}}</tr>
  </tr>
  <tr>
    <!--for the second object in the big json -->
    <th>data02</th>
    <tr ng-repeat = "var in obj">{{var}}</tr>
  </tr>
</table>

数据

[ "data01":[{"firstName":"John", "lastName":"Doe"}], "data02":["{"firstName":"Anna", "lastName":"Smith"}], "data03":[{"firstName":"Peter","lastName":"Jones"}] ]

所以第一个ng-repeat 将用于每个对象，第二个将值插入表格的“右侧”。

我找不到组织 HTML 元素的正确方法，因此它将按此顺序显示它们。这是example 我所说的“垂直表”。

【问题讨论】：

您必须创建新的 json 或使用 div 和类创建表，例如 display: table
为什么？我确实认为我需要 2 张桌子。
可能是因为 propper table 有水平结构 :(
我一直在尝试研究您提供的示例 HTML，但我似乎无法匹配您的数据与布局的对应方式。您可以发布您的实际 JSON，而不是随机样本数据吗？
当然，几分钟后。

【解决方案1】：

为了让您的表格以您所描述的格式显示信息，我们必须对您的数据做出一些假设。值得注意的是，我们假设您的数组将始终以相同的顺序输出，并且只有每个数组中的第一个对象包含您在此表中关心的数据。如果您的数据顺序不同，或者您希望迭代的数组中有多个对象，则您描述的格式将无法实现。

在实践中，这种解决方案非常死板，如果数据发生任何变化，都会崩溃。这不是 Angular 的正常设计；只要有可能，您应该尝试生成更接近您想要处理的信息的数据。

此解决方案结合使用数组访问和(key, value) 迭代来实现结果。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = [{
    "data01": [{
      "firstName": "John",
      "lastName": "Doe"
    }],
    "data02": [{
      "firstName": "Anna",
      "lastName": "Smith"
    }],
    "data03": [{
      "firstName": "Peter",
      "lastName": "Jones"
    }]
  }];
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table style="width:100%">
    <tr ng-repeat="(key,values) in data[0]">
      <th>{{key}}</th>
      <td ng-repeat="(key, value) in values[0]">{{value}}</td>
    </tr>
  </table>
</body>

</html>

【讨论】：

这个解决方案做了很多假设。每当您必须使用(key, value) 而不是实际的属性名称时，您就会非常紧密地 与数据输出耦合，对数据的任何更改都会破坏您的视图。这根本不是处理 Angular 数据的最佳方式。

【解决方案2】：

我不知道你为什么要为 obj 迭代两次

<table ng-repeat = "(key,obj) in data "style="width:100%">
    <tr> 
      <th>{{key}}</th>
    </tr>
    <tr ng-repeat = "var in obj">          
        <td>{{var}}</td>
    </tr>
</table>

【讨论】：

尝试并发布结果。
w3schools.com/html/tryit.asp?filename=tryhtml_table_headers - 垂直表格示例。
@ItsikMauyhas：你给了我们数组而不是哈希

【解决方案3】：

在 td 中使用 ng-repeat 而不是 tr 或 table。 我遇到了同样的问题，最后设法在垂直表中显示结果。

<div id="bdDiv" ng-controller="businessDate" ng-init="init()">
    <table>
        <tr >
            <th>Country</th>
            <td ng-repeat="item in response">{{item.type}}</td>
        </tr>
        <tr >
            <th>STAT</th>   
            <td ng-repeat="item in response">{{item.statDate}}</td>
        </tr>
        <tr >
            <th>OTP</th>    
            <td ng-repeat="item in response">{{item.otpDate}}</td>
        </tr>
        <tr >
            <th>LTP</th>
            <td ng-repeat="item in response">{{item.ltpDate}}</td>
        </tr>
    </table>
</div>

【讨论】：