Angularjs 带垂直表的嵌套ng重复

我有一个json数组，其中包含x个数字元素，每个元素都是另一个json数组。我想使用嵌套的

ng repeat

遍历这个数组，类似于

我的问题是，我想在“垂直表”中进行此操作：

因此，第一个

ng repeat

将用于每个对象，第二个将在表的“右侧”插入起始值

---

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

我不知道为什么要为

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>

{{key}}
{{var}}

我不知道为什么要为

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>

{{key}}
{{var}}

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

在实践中，这种解决方案非常严格，如果数据以任何方式发生更改，都会中断。这不是一个正常的角度设计；只要有可能，您应该尝试生成更接近您想要处理的信息的数据

此解决方案结合使用阵列访问和

（键、值）

迭代来实现结果

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.data=[{
“数据01”：[{
“名字”：“约翰”，
“姓氏”：“能源部”
}],
“数据02”：[{
“名字”：“安娜”，
“姓氏”：“史密斯”
}],
“数据03”：[{
“名字”：“彼得”，
“姓氏”：“琼斯”
}]
}];
});

安古拉斯普朗克
文件。写（“”）；
{{key}}
{{value}}
为了让您的表格以您描述的格式显示信息，我们必须对您的数据进行一些假设。值得注意的是，我们假设数组总是以相同的顺序输出，并且每个数组中只有第一个对象包含您关心的用于此表的数据。如果您的数据顺序不同，或者如果您希望迭代的数组中有多个对象，则无法实现您描述的格式

在实践中，这种解决方案非常严格，如果数据以任何方式发生更改，都会中断。这不是一个正常的角度设计；只要有可能，您应该尝试生成更接近您想要处理的信息的数据

此解决方案结合使用阵列访问和
（键、值）
迭代来实现结果


var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.data=[{
“数据01”：[{
“名字”：“约翰”，
“姓氏”：“能源部”
}],
“数据02”：[{
“名字”：“安娜”，
“姓氏”：“史密斯”
}],
“数据03”：[{
“名字”：“彼得”，
“姓氏”：“琼斯”
}]
}];
});

安古拉斯普朗克
文件。写（“”）；
{{key}}
{{value}}
在td中使用ng repeat，而不是tr或表格。我也遇到了同样的问题，并最终设法在垂直表格中显示结果

<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>


国家
{{item.type}
斯达
{{item.statDate}
检察官办公室
{{item.otpDate}
LTP
{{item.ltpDate}
在td中使用ng repeat，而不是tr或表格。我也遇到了同样的问题，并最终设法在垂直表格中显示结果

<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>


国家
{{item.type}
斯达
{{item.statDate}
检察官办公室
{{item.otpDate}
LTP
{{item.ltpDate}
您必须创建新的json或使用div和display:table之类的类创建表为什么？我确实认为我需要两张桌子。可能是因为支撑桌具有水平结构：（我一直在研究您提供的示例HTML，但我似乎无法匹配您的数据与布局的对应关系。您是否可以发布实际的JSON，而不是随机的示例数据？当然，几分钟后。您必须创建新的JSON或使用div和display:tablewhy之类的类创建表？我确实认为我需要两个表来显示这些数据。）可能是因为支撑台具有水平结构：（我一直在研究您提供的示例HTML，但我似乎无法匹配您的数据与布局的对应关系。您能发布实际的JSON而不是随机样本数据吗？当然，几分钟后。尝试并发布结果。-垂直表示例。@ItsikMauyhas:您给我们的是数组而不是哈希和posting结果。-垂直表示例。@ItsikMauyhas:您给我们的是数组而不是哈希。此解决方案有很多假设。任何时候您都必须使用
（键，值）
而不是实际的属性名称，然后与数据输出紧密耦合，对数据的任何更改都会破坏您的视图。这根本不是处理角度数据的最佳方式。此解决方案有很多假设。任何时候都必须使用
（键、值）
然后，与数据输出紧密耦合的不是实际的属性名，而是一个