Question

嘿，Angular有新手，试图在页面上均匀分布构建一个8x8表。例如

0 1 2 3 4 5 6 7
0 1 2 3 4 5 6 7
0 1 2 3 4 5 6 7
0 1 2 3 4 5 6 7
0 1 2 3 4 5 6 7
0 1 2 3 4 5 6 7
0 1 2 3 4 5 6 7
0 1 2 3 4 5 6 7

除了代码中显示的每个td条目的{{i + j}}形式之外。目前它看起来像：

0123 4 5 6 7
0123 4 5 6 7
0123 4 5 6 7
0123 4 5 6 7
0123 4 5 6 7
0123 4 5 6 7
0123 4 5 6 7
0123 4 5 6 7

不确定为什么但是我的表格不均匀分布，这里是代码：

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <table>
    <tr><th colspan = '8'>row number</th></tr>
    <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
      <td ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">{{i+j}}</td>
    </tr>
  </table>

</body>
</html>

只有可能影响它的css是引导程序，因为我的app.css文件中没有任何内容。谢谢！

Answer 1

<tr><th colspan="8">row number</th></tr>
------------^

重新阅读后，我猜你想要这样的东西：

<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7] track by $index">
  <th>row number {{%index}}</th>
  <td ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">{{i+j}}</td>
</tr>

好的，也许这个：

<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
  <td>{{i + 1}}</td>
  <td ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">{{j}}</td>
</tr>

的 Demo

如果您要问的是CSS，请尝试以下方法：

th, td { width: 12.5%; }

<强> Demo 2

Answer 2

你的问题不是来自AngularJS，而是来自HTML！

您在ng-repeats上方定义了一行，只有一列row number

这就是你遇到这个问题的原因！

Answer 3

这是因为您使用<col width="100%"></col>将第一列的宽度设置为100％。你想要实现的是大概有表标题跨越整个表。要完成此操作，您应该使用colspan属性。

<table>
   <tr><th colspan="8">row number</th></tr>
   <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
      <td ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">{{i+j}}</td>
   </tr>
</table>

编辑：要使列间距相等，您需要将table-layout: fixed CSS规则添加到表格中，并为表格提供宽度。像这样：

<style>
   #myTable {
      table-layout: fixed;
      width: 100%;
   }
</style>

<table id="myTable">
   <tr><th colspan="8">row number</th></tr>
   <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
      <td ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">{{i+j}}</td>
   </tr>
</table>

根据需要添加额外的CSS，以实现您对边框，文本居中等所需的外观。

使用ng-repeat创建一个8x8表

3 个答案:

的 Demo