Angular.js : Dynamic length of columns in table

Question

I am new to Angular and have been trying to make a dynamic table.

The user enters the no of columns he wants and then he can add as many rows to each column as he wants.

I have provided an "add" button at the end of each column to add new row to that particular column.

My code looks somewhat like this:

<table>

  <tr>
    <th ng-repeat="x in setno"> SET {{x.number}}</th>
    </tr>
  
  <tr ng-repeat="z in selected">
    <td> </td>
    </tr>
  
  <tr>
    <td ng-repeat="x in setno"> 
       <button ng-click="selected.push({})"> add </button>
    </td>
    </tr>
  
</table>

where, setno is list containing numbers:

$scope.setno[{id:"a", number:"1"},{id:"b", number:"2"},...];

and selected has a similar structure.

The problem is that when I click "add" button of any column, a new row gets add to all the columns.

Whereas I want, a new row to be added to only the one whose "add" button has been clicked.

How can I know whose "add" button has been clicked?

score 0 · Answer 1 · edited May 23 '17 at 11:53

How can i know whose "add" button has been clicked?

You need access to the current $index of the target repeater. Now I'm not sure which it is you're trying to target but you can store an ng-repeater's $index as another variable for access from inner repeaters using the following syntax:

<!-- outer loop -->
<div ng-repeat="(idxA, item) in items)">

    <!-- inner loop -->
    <div ng-repeat"(idxB, obj) in item.objs">

         <ul>
             <!-- another inner loop -->
             <li ng-repeat="li in obj.pts">

In the above code idxA will be the same as the outer loop's $index, idxB is the inner loop's $index and so on. Then you just pass the index (e.g. idxA or idxB) to your method.

resources:

Angular.js : Dynamic length of columns in table

1 Answers1