javascript - AngularJS-使用循环表值动态添加表行和列

我需要你的帮助。我有2个字段用于表的输入维（输入的行和列数）和一个按钮。如果单击此按钮，则表应动态填充给定数量的行和列。如何使此功能生效，该表中的值将从右下角的单元格螺旋开始/在电路中到左和顶部，直到所有单元格（沿顺时针方向）...

使用HTML，AngularJS，jQuery / JavaScript的最佳方法是什么？（见图片）
http://i.imgur.com/O4GRpND.jpg

非常感谢

目前，我已经做了类似的事情：






    循环表

<fieldset>
  <legend>Input</legend>
<label id="nameRow" >Number of Rows</label> <br />
<input type="number" ng-model="row" placeholder="Row" ><br /><br /><br />
<label id="nameCol">Number of Columns</label> <br />
<input type="number" ng-model="col" placeholder="Column" ><br />
<br></br>
<button type="button" ng-click="addRowCol()">KREIRAJ TABLICU</button>
</fieldset>

<table border="1" cellpadding="10">

  <body>
    <tr ng-repeat="input Rows and Columns">
      <td>
        {{ input.row }}
      </td>
      <td>
        {{ input.column }}
      </td>


    </tr>
  </body>
</table>

最佳答案

将行和列分配给合并范围内的变量。然后在模板中对列和行数执行ng-repeat并输出表。您可能需要先将数字转换为数组。

像这样：

在控制器中：

$scope.columns = 5;
$scope.rows = 5;
$scope.getNumber = function(num) {
    return new Array(num);
}

在视图中：

        <table>
            <thead>
                <th ng-repeat="col in getNumber(columns)" ></th>
            </thead>

            <tbody>
                <tr ng-repeat="col in getNumber(rows)" >
                    <td ng-repeat="row in getNumber(columns)" ></td>
                </tr>
             </tbody>
        </table>

如果您有一个值数组，并且想打印出这些值，则可以使用ng-repeat中的花括号作为col或row来实现，具体取决于数据。

希望这可以帮助！

关于javascript - AngularJS-使用循环表值动态添加表行和列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27428448/