Angularjs - 单击父行时如何动态添加行答案

【问题标题】：Angularjs - how to add a row dynamically when clicked on parent rowAngularjs - 单击父行时如何动态添加行
【发布时间】：2017-02-08 00:46:22
【问题描述】：

我是 angularjs 新手，遇到以下问题。

将创建一个从 JSON 读取数据的行表。假设显示了 6 行。但实时行数会有所不同。

每行的第一个 td 中都有一个手风琴（+ 符号）。如果单击此手风琴，则应通过从另一个不同的 JSON 读取数据来显示该行的子行。

对于剩下的 5 行，它也应该显示相应行的手风琴被点击的子行。

我创建了显示 6 行的表。但我面临的挑战是如何在单击时将子行动态链接到现有行。这是 plunkr - https://plnkr.co/edit/FTbjn9ZbAOTqc3b6j52h?p=preview

感谢任何帮助。

<html>
<head>
<script src="angular.min.js"></script>

<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">

<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<button type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>
<div  class="row">
<div class="col-md-9">
<div style=" margin-left:50px;" class="tableheight">
  <table class="table-nested ">
    <thead>
      <tr>
        <!-- <th >
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> -->

        <th>
        Repository
        </th>
        <th >
          Version
        </th>
        <th >
          Size
        </th>
        <th >
        Modified By
        </th>
        <th >
        Labels
        </th>
        <th >
        Description
        </th>
      </tr>
    </thead>
    <tbody  style="font-size:12px"  data-ng-repeat="item in list">
    <tr >
      <td  ><button style="background-color: #fff;" class="accordion"></button>
       {{item.name}}
      </td>

      <td >
        {{item.Version}} 
      </td>
      <td >
        {{item.Size}}
      </td>
      <td >
        {{item.ModifiedBy}}
      </td>
      <td >
        {{item.Labels}}
      </td>
      <td >
        {{item.Description}}
      </td>
      </tr>
    </tbody>
  </table>
  </div>

</div>
</div>
</body>
</html>

【问题讨论】：

你还没有明确哪些孩子应该和哪个repo一起去。
@sh0ber 在问题中添加了确切的需求图像。单击 + 链接时，如何动态添加行并显示从不同 json 获得的内容。如果您需要对此进行更多说明，请告诉我。

标签： javascript html css angularjs

【解决方案1】：

See the Plunkr solution

你想要第二个 <tr> 和 ng-repeat 在第一个之后：

<tr ng-if="item.Labels==child.Labels" ng-show="item.opened" ng-repeat="child in children">
    <td>{{child.name}}</td>
    ...etc
</tr>

这将在包 .Labels 与 repo .Labels 匹配的位置构建额外的行，并且仅当 repo 的 opened 属性为 true 时才会显示。 + 按钮将切换每个项目的 opened 属性。您需要对您的数据进行两次小的编辑才能完成这项工作：

将children 数据添加到$scope（用于在第二个ng-repeat 中访问）。
将默认 opened: false 属性添加到所有 repos（第一个除外，即 true）。

这不会显示组件，但希望您能明白。

See the Plunkr solution

【讨论】：

感谢您的帮助！我尝试将组件添加到您提供的解决方案中的第二个 tr 标签。我无法将组件循环到相应的捆绑包。更改代码后出现语法错误。我的确切问题是无法将多个组件链接到单个捆绑包。请提出建议。
支持这个答案（以及接受它）然后提出一个新问题 :) 基本上你需要第三个 tr 来循环组件。
点赞！我需要在哪里添加第三个 tr？对于包的每个循环（即第二个三，我也需要循环组件）。无法在 2nd tr 标签中添加 3rd tr。请帮帮我。
问题是连续的表行是显示嵌套父/子数据的一种非常糟糕的方式，因为行不能包含其他行。更合乎逻辑地显示嵌套数据会好得多，例如通过在tds 或其他内容之一中包含有关组件的信息。或者，根本不使用表，并重复 divs 其中可以包含子 divs。

【解决方案2】：

如果您想在单击行后插入行，请使用：

<style>
    #tableid {
        font-size: 14px;
    }
    #tableid .childRow {
        font-size:10px;
    }

    #tableid .childRow td:first-of-type {
        padding-left:10px;
    }
</style>
<table id="tableid">
    <tr onclick="AddRow(this)">
        <td>abcd</td>
    </tr>
</table>
<script>
    
    function AddRow(e)
    {
        for (var i = 0; i < 5; i++)
        {
            var index = e.rowIndex;
            var table = document.getElementById("tableid");
            var row = table.insertRow(index + 1 + i);
            row.setAttribute('class', 'childRow');
            var cell = row.insertCell(0);
            cell.innerHTML = "efgh";
        }
    }
</script>

【讨论】：

如果我要插入多行，我将如何添加？
我编辑了答案以添加您想要的每个数字。还有一个用于子行的类，您可以为它们设置其他样式。