AngularJS：レンダリングの特定のテーブル行

Question

私はテーブルの行を表示するためにng-repeatを使用している単純なテーブルを持っています。

ここでは、私が達成したい動作があります。私は通常のテーブルrawをクリックしたときに表示されるローをもう1つ表示し、クリックした行の後にカスタムマークアップを保持するカラムを1つだけ表示します。ここで私は

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

を試みた。しかし、これはちょうど[[object HTMLTableRowElement]]を示し、行がレンダリングされていないものです。何か案は？

P.S.ここに画像があります、これが役に立つと願っています。

P.S.ここに新しい行が1列のみを持っているので、テーブルには、

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

は、私はちょうど私のrows配列に新しい行を追加することはできませんレンダリング方法です、私はcolspan属性を渡すことにより、テーブル全体の長さ、可能性に列を拡張する必要があり新しい行

Answer 1

Hereにあなたは私がここにダミーのHTMLを使用してだけの機能を確認するために行の1つでクリックイベントをバインドした

$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>'); 
} 

実現したい機能のPlunkerコードです。元のソースコードはそれを確認するためのものではありません。

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