Question

我刚开始学习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>

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

enter image description here

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

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

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

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

Angular JS表创建问题

4 个答案: