AngularJS - dynamic add table rows and columns wih cyclic table values

Question

I need your help. I have 2 fields for input dimension of table (input for number of rows and columns) and one button. If I click this button, table should be filled dynamically with given number of rows and columns. How can make this functionality, that table be filled with values starting from bottom right cell spiral / in circuit to the left and top until all cells (in clockwise direction)...

What is the best way to this with HTML, AngularJS, jQuery / JavaScript. (See picture) http://i.imgur.com/O4GRpND.jpg

Thanks a lot

Currently i have made something just like this:

Cyclic table

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

Someone will ask you a typical question "what have your tried" — Yang
– Yang, Commented Dec 11, 2014 at 17:07

loujaybee · Accepted Answer · 2014-12-11 17:41:48Z

Assign your rows and columns to a variable on the scope. Then in your template do an ng-repeat for the number of columns and rows and output the table. You might need to convert the number into an array first.

Something like this:

In the controller:

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

In the view:

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

If you had an array of values and wanted to print out the values you can do that with curly braces inside your ng-repeat as col or row dependent on the data.

Hope this helps!

You might need a separate array for your headers and your td data if they are different also.
Number of Rows and Columns is not fixed... That number is input values from fields...

Collectives™ on Stack Overflow

AngularJS - dynamic add table rows and columns wih cyclic table values

Cyclic table

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

Cyclic table

1 Answer 1

2 Comments

Related