Angular JS表创建问题答案

【问题标题】：Angular JS table creation issueAngular JS表创建问题
【发布时间】：2015-03-26 20:54:57
【问题描述】：

我刚刚开始学习 Angular JS，我正在尝试使用 ng-repeat 创建一个 8X8 表。我无法获得 8 个表头。所有表格标题都在一列中。这是我的代码。

<table border="1px solid black">
      <tr ng-repeat="k in [0,1,2,3,4,5,6,7,8]">
        <th>
          column
        </th>
      </tr>
      <tr ng-repeat="i in [0,1,2,3,4,5,6,7,8]">
        <td ng-repeat="j in [0,1,2,3,4,5,6,7,8]">
          [{{i}},{{j}}]
        </td>
      </tr>
    </table>

这是我的代码的输出。我不确定为什么会这样。

【问题讨论】：

在不知道角度的情况下，您将ng-repeat 放在<tr> 标记中，这将在逻辑上创建8 行，其中包含表头。而是尝试将代码放在标题单元格中：<th ng-repeat="k in [0,1,2,3,4,5,6,7,8]"></th>
@SimonBambey 非常感谢。我是 Angular 新手，这就是我犯错的原因。

标签： angularjs html-table

【解决方案1】：

ng-repeat 应该在 <th> 中，而不是在 <tr> 中。如果没有，您将创建 8 行和 1 个标题，并且您想要 1 行和 8 个标题。

    <table border="1px solid black">
      <tr>
        <th ng-repeat="j in [0,1,2,3,4,5,6,7,8]">
          column
        </th>
      </tr>
      <tr ng-repeat="i in [0,1,2,3,4,5,6,7,8]">
        <td ng-repeat="j in [0,1,2,3,4,5,6,7,8]">
          [{{i}},{{j}}]
        </td>
      </tr>
    </table>

【讨论】：

这将创建 8 行标题，每行 8 个单元格。我相信他只在寻找一个标题行。
他们在here 中说“使用an 额外的ng-repeat”。我理解 a/an 在这句话中表示 one。如果不使用 two 额外的ng-repeat，我无法做到这一点。一个似乎不可能（或者我错过了一些基本点）。

【解决方案2】：

<table>
    <tr>
        <th ng-repeat="i in [0,1,2,3,4,5,6,7]">Column: {{i}}</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>

【讨论】：

【解决方案3】：

仔细阅读……

"Extra points: Try and make an 8x8 table using an additional ng-repeat..."

<html lang="en" ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
   <table>
     <tr><th colspan="8">8x8 Table</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+1}},{{j+1}}]</td>
     </tr>
    </table>
  </body>
</html>

【讨论】：

【解决方案4】：

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

【讨论】：