Angular JS table 创建问题

Question

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

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

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

Answer 1

ng-repeat 应该在 <th> 而不是 <tr>。如果不是，您正在创建 8 行 1 header 并且您想要 1 行 8 headers.

    <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 table 创建问题

Angular JS table creation issue

html-table

angularjs