Angularjs 我想要angular js中每个tr元素的子行

首先，我的代码是： html

{{assets.name}
{{assets.code}
儿童排

还有我的控制器

 $scope.childRowToggle =  function($event){
     $('#childrow').remove();
           var $this  = $($event.target);
           var $obj =$this.parent().parent();
           console.log($obj.attr('class'));
           $("<tr id='childrow'><td colspan='5'>Dummy Data</td></tr>").insertAfter($obj);

     }

$scope.childrowtheggle=函数（$event）{
$（'#childrow'）。删除（）；
var$this=$（$event.target）；
var$obj=$this.parent（）.parent（）；
log（$obj.attr（'class'））；
$（“虚拟数据”）。后面插入（$obj）；
}

---

现在，当我按下向下箭头时，“虚拟数据”即将出现，但我想在对应tr下显示子tr。我如何才能做到这一点？

如果我理解正确，单击向下箭头时，您希望在当前

下插入

。您可以执行以下操作，而不是通过jQuery在控制器中插入新的html：

<tbody ng-repeat="assets in vm.employees">
    <tr ng-init="assets.showChild=false">
        <td class="name">
            <i class="mdi mdi-plus s16" ng-click="assets.showChild=!assets.showChild"></i>
            <div ng-click="details(assets.code)">{{assets.name}}</div>
            <span class="secondary-text">{{assets.code}}</span>
        </td>
    </tr>
    <tr ng-show="assets.showChild">
        <td colspan="5" class="child">
            child row
        </td>
    </tr>
</tbody>

{{assets.name}
{{assets.code}
儿童排

HTML不关心一个表有多少个

标记，因此您可以将

ng repeat

放在

上。然后在表体中插入两行，然后在第一行的向下箭头上设置

ng click

，以切换表体中第二行的可见性。使用此方法，您不必担心在表中插入新的HTML（以及在稍后关闭

时删除它）

---

您可能想做的唯一不同的事情是在控制器中的

vm.employees

中添加

showChild

成员，而不是在第一个

指令中使用

ng init

指令，如果您发现自己想要在Angular中有效地工作，则需要取消很多jQuery习惯

.appendChild

或

innerHTML

等您可能走错了方向

永远不要直接在Angular中修改DOM——顶多你只是通过与框架对抗使自己的生活更加艰难，顶多你的更改将在下一个$digest中消失，因为Angular不知道你已经在DOM中翻找过了

更好的方法是修改数据，让Angular为您处理视图——例如，您可以让向下箭头将布尔“showChild”添加到相应的

vm.employee

scope.toggleChildRow(asset) = function() {
  asset.showChild = !asset.showChild;
});

在模板中执行以下操作：

<tbody ng-repeat="assets in vm.employee">
  <tr><td ng-click="toggleChildRow(assets)">↓</td>(...normal row...)</tr>
  <tr ng-if="assets.showChild">...child row...</tr>
</tbody>

↓（…正常行…）
…儿童街。。。

---

（奇怪的多重

是ng repeat with tables的一个不幸但必要的产物。）

不要忘记提供vm.employees列表。

<tbody ng-repeat="assets in vm.employee">
  <tr><td ng-click="toggleChildRow(assets)">↓</td>(...normal row...)</tr>
  <tr ng-if="assets.showChild">...child row...</tr>
</tbody>