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"},...];

和selected具有相似的结构。

问题是当我点击任何列的“添加”按钮时，一个新行会添加到所有列中。

而我想要的是，仅将新行添加到已单击“添加”按钮的行中。

我如何知道点击了谁的“添加”按钮？

Answer 1

我如何知道点击了谁的“添加”按钮？

您需要访问目标中继器的当前$index。现在我不确定您要针对哪个目标，但您可以使用以下语法将 ng-repeater 的 $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等等。然后，您只需将 index（例如 idxA 或 idxB）传递给您的方法。

资源：

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