Javascript AngularJS：呈现特定的表行

因此，我有一个简单的表，其中我使用

ng repeat

来显示表行

这里是我想要完成的一个行为-显示一个额外的raw，当我单击常规表raw时，在单击row之后显示，其中只有一列保存我的自定义标记。这是我试过的

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

我不能只将新行添加到我的

行
数组中，因为新行只有一列，我必须将列扩展到整个表的长度，这可以通过向新行传递
colspan
属性来实现。
是您想要实现的特性的Plunker代码

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

$scope.appendRow=函数（$event）{
//我从单击的行中获取目标，您可以替换
//要附加的目标父对象
var targetToappend=angular.element（$event.target.parentNode.parentNode）；
targetToappend.append（'Target'）；
}

我在这里使用了一个虚拟HTML，并将click事件与其中一行绑定，只是为了检查功能。因为原始soruce代码不在那里检查

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


{{row.name}
{{row.status}}

希望这有帮助
 显示如何渲染早期行的逻辑？我有一个$scope.rows，我只是使用ng Repeat渲染它，所以只需使用单击按钮将新行数据推送到$scope.rows中。目标是在单击一行后使用
colspan=4
属性精确地追加行，通过
ng repeat
这是不可能的。您是否能够将目标元素添加到要追加新行的位置？
<tr ng-repeat="row in rows">
  <td ng-click="appendRow($event)"> {{ row.name }}</td>
   <td>{{ row.status }}</td>
</tr>