循环表

Question

我需要你的帮助。我有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>

Answer 1

将行和列分配给作用域上的变量。然后在模板中对列数和行数进行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或行，这取决于数据。

希望这有帮助！

AngularJS - 动态添加具有循环表值的表行和列

循环表

1 个答案: