AngularJS: Render spezifische Tabelle Reihe

Question

So habe ich eine einfache Tabelle, wo ich ng-repeat verwenden, um Tabellenzeilen anzuzeigen.

Und hier ist ein Verhalten, das ich erreichen möchte - zeigen Sie eine zusätzliche zusätzliche roh, die erscheint, wenn ich auf reguläre Tabelle roh, nach angeklickt Zeile, mit nur einer Spalte, die meine benutzerdefinierte Markup enthält. Hier ist, was ich versucht habe

parentTr.after(angular.element('<tr md-row>New raw</tr>')); 

Aber diese zeigen nur [[object HTMLTableRowElement]] und die Zeile nicht gerendert wird. Irgendwelche Ideen?

P.S. Hier ist ein Bild, hoffe, dass dies hilfreich wäre

P.S. Hier ist, wie Tabelle

<tr ng-repeat="row in rows"> 
    <td>{{ row.name }}</td> 
    <td>{{ row.status }}</td> 
</tr> 

gemacht Ich kann nicht nur neue Zeile in mein rows Array hinzufügen, weil neue Zeile nur eine Spalte hat, ich habe Spalte auf die gesamte Tischlänge zu verlängern, die möglich, indem colspan Attribut auf die neue Reihe ist

Answer 1

Here der Plunker-Code für die Funktion, die Sie

$scope.appendRow = function($event){ 
    // I am getting target from clicked row, you can replace 
    // your target parent to append 
    var targetToappend = angular.element($event.target.parentNode.parentNode); 
    targetToappend.append('<tr><td colspan="2">Target<td></tr>'); 
} 

ich verwendet habe, ein Dummy-HTML hier und band das Click-Ereignis mit einem der Zeilen nur zu prüfen, um die Funktionalität erreichen wollen. Da der ursprüngliche soruce-Code nicht da ist, um das zu überprüfen.

<tr ng-repeat="row in rows"> 
    <td ng-click="appendRow($event)"> {{ row.name }}</td> 
    <td>{{ row.status }}</td> 
</tr> 

Hoffe, das hilft!