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

I am having a problem where when I run this code which reads data from 2 files both containing 10 numbers. These are both stored seperately in the mainlist but the only problem is when I try to output them into a table, instead of putting each one under its title it just puts both under the "List1" title in a 20 long list. So how do I make mainlist[0] appear under list 1 and mainlist[1] under list 2. Sorry that my code is very messy and very basic as I have only just started learning JS and Angular.

我遇到一个问题,当我运行这个代码从两个包含10个数字的文件中读取数据时。这些都是单独存储在主列表中,但唯一的问题是当我尝试将它们输出到表中时,而不是将每个都放在其标题下,它只是将两个都放在20长列表中的“List1”标题下。那么我如何使主列表[0]出现在列表2下的列表1和主列表[1]下。抱歉,我的代码非常混乱,非常基本,因为我刚开始学习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

2 个解决方案

#1

I hope you're liking Javascript and AngularJS so far! To answer your question the way that tables are created via HTML is row based and not column based meaning <tr> encapsulates cells,<td>, so to create tables you are filling in rows by cells. To accomplish what you want solely through HTML and no additional Javascript you could think of your data being two cells within a single row instead of several rows per column.

我希望你到目前为止喜欢Javascript和AngularJS!要回答您的问题,通过HTML创建表的方式是基于行而不是基于列的意义封装单元格,因此要创建按单元格填充行的表。要通过HTML完成您想要的任务并且不需要额外的Javascript,您可以认为您的数据是单行中的两个单元格而不是每列几行。

I wrote up a quick example of how you could accomplish this through nesting tables. So why nest tables and not just put <td><tr></tr></td>? Row elements cannot be placed within cell elements, but tables can! If you try to place <tr> within <td> it will be rendered ignoring <td>.

我写了一个快速的例子,说明如何通过嵌套表来实现这一目标。那么为什么要嵌套表而不只是放 ?行元素不能放在单元格元素中,但表格可以!如果您尝试将放在中,它将被忽略。

I hope this answers your question.

我希望这回答了你的问题。

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>

#2

Here is a solution for your case based on the fact that the two lists have equal length:

基于两个列表具有相同长度的事实,这是针对您的案例的解决方案:

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

#1