Question

我遇到一个问题，当我运行此代码时，它从两个包含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

Answer 1

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

Answer 2

根据两个列表具有相同长度的事实，这是针对您的案例的解决方案：

<table ng-init="items = mainList[0]">
    <tr>
        <th>
            List 1
        </th>
        <th>
            List 2
        </th>
    </tr>
    <tr ng-repeat="item in items">
        <td>
            {{item}}
        </td>
        <td>
            {{mainList[1][$index]}}
        </td>
    </tr>
</table>

如何使2个角度列表在html表中彼此相邻

2 个答案: