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

【问题标题】：I want child row for every tr element in angular js我想要angular js中每个tr元素的子行
【发布时间】：2017-04-14 16:08:44
【问题描述】：

首先我的代码： html

    <td class="name">
        <i class="mdi mdi-plus s16" ng-click="childRowToggle($event)"></i>
        <div ng-click="details(assets.code)">{{assets.name}}</div>
        <span class="secondary-text">{{assets.code}}</span>
    </td>

</tr>
<tr data-ng-repeat="assets in vm.employees" class="collapse row{{$index}}">
    <td colspan="5" class="child">
        child row
    </td>
</tr>

和我的控制器

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

     }

现在当我按下向下箭头时，“虚拟数据”即将到来，但我想在对应的 tr 下显示子 tr。我该怎么做？

【问题讨论】：

别忘了提供 vm.employees 名单。

标签： angularjs html-table parent-child

【解决方案1】：

如果我对您的理解正确，您希望在单击向下箭头时在当前的<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>

HTML 不关心一个表格有多少<tbody> 标签，因此您可以将ng-repeat 放在<tbody> 上。然后将两行插入表格主体，然后在第一行的向下箭头上设置ng-click 以切换表格主体中第二行的可见性。使用这种方法，您不必担心将新的 HTML 插入到表格中（并在稍后关闭 <tr> 时将其删除。）

您可能想要做的唯一不同的事情是在控制器中将showChild 成员添加到vm.employees，而不是在第一个<tr> 上使用ng-init 指令

【讨论】：

【解决方案2】：

在 Angular 中有效工作需要忘掉很多 jQuery 习惯——如果您发现自己使用 .appendChild 或 innerHTML 等，那么您可能走错了路。

永远不要直接在 Angular 中修改 DOM —— 最好的情况是你通过与框架工作而使自己的生活变得更加困难，最坏的情况是你的更改将在下一次 $digest 中被抹去，因为 Angular 不认识你'在 DOM 中翻遍了。

更好的方法是修改数据并让 Angular 为您处理视图 - 例如，您可以让向下箭头在适当的 vm.employee 中添加一个布尔值“showChild”

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>

（奇怪的多重<tbody> 是 ng-repeat 与表的不幸但必要的工件。）

【讨论】：