CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
oknevermind
oknevermind

Reputation: 111

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

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>

Upvotes: 0

Views: 2216

Answers (1)

loujaybee
loujaybee

Reputation: 96

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!

Upvotes: 1

Related Questions