gpt4 book ai didi

javascript - 如何使 2 个 Angular 列表在 html 表中彼此相邻显示

转载 作者:可可西里 更新时间:2023-11-01 13:49:55 26 4
gpt4 key购买 nike

我遇到了一个问题,当我运行这段代码时,它从 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>

JSfiddle

最佳答案

我希望你到目前为止喜欢 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com