Question

首先我的代码： 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。我怎么能这样做？

Answer 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成员，而不是在第一个ng-init指令上使用<tr>成员{1}}

Answer 2

在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>

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

我希望在角度js中每个tr元素的子行

2 个答案: