我遇到了一个问题，当我运行这段代码时，它从 2 个文件中读取数据，这两个文件都包含 10 个数字。它们都单独存储在主列表中，但唯一的问题是当我尝试将它们输出到一个表中时，不是将每个都放在其标题下，而是将它们都放在 20 长列表中的“List1”标题下。那么如何让 mainlist[0] 出现在列表 1 下，mainlist[1] 出现在列表 2 下。抱歉，我的代码非常困惑且非常基础，因为我只有刚开始学习 JS 和 Angular。
<div id="Tables">
<table>
<tr>
<th>List1</th>
<th>List2</th>
</tr>
<tr>
<tr ng-repeat="i in mainlist[0]">
<td>{{i}}</td>
</tr>
<tr ng-repeat="i in mainlist[1]">
<td>{{i}}</td>
</tr>
</tr>
</table>
</div>最佳答案
我希望你到目前为止喜欢 Javascript 和 AngularJS!要回答您的问题，通过 HTML 创建表格的方式是基于行而不是基于列的意思 <tr>封装细胞，<td> ，因此要创建您要按单元格填充行的表格。要仅通过 HTML 完成您想要的而不需要额外的 Javascript，您可以将您的数据视为单行中的两个单元格，而不是每列多行。
我写了一个简单的例子来说明如何通过嵌套表格来实现这一点。那么为什么要嵌套表格而不是只放 <td><tr></tr></td> ？行元素不能放在单元格元素中，但表格可以!如果您尝试放置 <tr>在 <td> 内它将被忽略 <td> .
我希望这能回答您的问题。
https://jsfiddle.net/krd4p0yt/
var myApp = angular.module('myApp', []);
myApp.controller('TestCtrl', ['$scope',
function($scope) {
$scope.mainList = [
[1, 2, 3],
[4, 5, 6]
];
}
]);table {
border: 2px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<table>
<th>List 1</th>
<th>List 2</th>
<tr>
<td>
<table>
<tr ng-repeat="i in mainList[0]">
<td>{{i}}</td>
</tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="i in mainList[1]">
<td>{{i}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>关于javascript - 如何使 2 个 Angular 列表在 html 表中彼此相邻显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36415092/