Angular.js: Dynamische Länge der Spalten in Tabelle

Question

Ich bin neu in Angular und habe versucht, eine dynamische Tabelle zu erstellen.

Der Benutzer gibt die Anzahl der Spalten, die er will, und dann kann er so viele Zeilen zu jede Spalte hinzufügen, wie er will.

Ich habe eine "hinzufügen" -Schaltfläche am Ende jeder Spalte hinzugefügt, um neue Zeile zu dieser bestimmten Spalte hinzuzufügen.

Mein Code sieht etwas wie folgt aus:

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

wo setno ist die Liste mit Zahlen:

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

und ausgewählt eine ähnliche Struktur aufweist.

Das Problem ist, dass, wenn ich auf "hinzufügen" Schaltfläche einer beliebigen Spalte, eine neue Zeile wird hinzugefügt, um alle Spalten.

Während ich will, eine neue Zeile nur hinzugefügt werden, deren "hinzufügen" -Taste geklickt wurde.

Wie kann ich wissen, wessen "add" Knopf geklickt wurde?

Answer 1

Wie kann ich wissen, wessen "Hinzufügen" Knopf geklickt wurde?

Sie benötigen Zugriff auf den aktuellen $index des Ziel Repeater. Jetzt bin ich nicht sicher, was es ist Sie versuchen, zu zielen, aber Sie können speichern Sie eine ng-repeater ‚s $index als eine andere Variable für den Zugriff von inneren Repeatern mit der folgenden 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 dem obigen Code idxA wird sei die gleiche wie die äußere Schleife $index, idxB ist die innere Schleife $index und so weiter. Dann übergeben Sie einfach den Index (z. B. idxA oder idxB) an Ihre Methode.

Ressourcen:

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