Angular.js: Динамическая длина столбцов в таблице

Question

Я новичок в Angular и пытаюсь создать динамическую таблицу.

Пользователь вводит нулевые столбцы, которые он хочет, а затем он может добавить столько строк в каждой колонке, сколько захочет.

Я добавил кнопку «добавить» в конце каждого столбца, чтобы добавить новую строку в этот конкретный столбец.

Мой код выглядит примерно так:

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

где setno является список, содержащий номера:

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

и выбранные имеет аналогичную структуру.

Проблема в том, что когда я нажимаю кнопку «add» в любом столбце, новая строка добавляется ко всем столбцам.

Принимая во внимание, что новая строка добавляется только к той, чья кнопка «добавить» была нажата.

Как узнать, у кого есть кнопка "добавить"?

Answer 1

Как узнать, чья кнопка «добавить» была нажата?

Вам необходим доступ к текущей $index на целевой ретранслятора. Теперь я не уверен, что вы пытаетесь цель, но вы можете сохранить ng-repeater «s $index в другой переменной для доступа из внутренних ретрансляторов, используя следующий синтаксис:

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

В приведенном выше коде idxA будет быть таким же, как внешний контур $index, idxB - это внутренний цикл $index и т. д. Затем вы просто передаете свой метод (например, idxA или idxB).

ресурсы:

• https://stackoverflow.com/a/18914958/1121919
• https://docs.angularjs.org/api/ng/directive/ngRepeat