Angularjs - 如何在父行上单击时动态添加行

Question

I am new to angularjs and stuck with the below problem. 我是angularjs的新手，并坚持以下问题。

There will be a table of rows created which reads data from JSON. 将创建一个从JSON读取数据的行表。 Say there are 6 rows displayed.But in real time number rows will vary. 假设有6行显示。但实时数字行会有所不同。

Each row has an accordion(+ symbol) in its first td. 每行在其第一个td中都有一个手风琴（+符号）。 If this accordian is clicked then the children rows of that row should be displayed by reading the data from one more different JSON. 如果单击此手风琴，则应通过从另一个不同的JSON读取数据来显示该行的子行。

Similarly for the remaining 5 rows as well it should display the children rows for the respective row's accordion is clicked. 类似地，对于剩余的5行，它应该显示相应行的手风琴的子行被单击。

I have created the table with the 6 rows displayed. 我创建了显示6行的表。 But the challenge I am facing is how to link child rows to the existing rows dynamically when clicked. 但我面临的挑战是如何在点击时动态地将子行链接到现有行。 Here is the plunkr - https://plnkr.co/edit/FTbjn9ZbAOTqc3b6j52h?p=preview 这是plunkr - https://plnkr.co/edit/FTbjn9ZbAOTqc3b6j52h?p=preview

Any help is appreciated. 任何帮助表示赞赏。

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

Answer 1

See the Plunkr solution 请参阅Plunkr解决方案

You want a 2nd <tr> with ng-repeat following the first: 你希望在第一个之后使用ng-repeat进行第二次<tr> ：

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

This will build additional rows where the bundle .Labels matches the repo .Labels and will be shown only when the repo's opened property is true . 这将建立在捆绑其他行.Labels匹配回购.Labels ，将显示只有当回购的opened属性为true 。 The + button will toggle the opened property for each item. +按钮将切换每个项目的已opened属性。 You'll need two minor edits to your data to make this work: 您需要对数据进行两次小修改才能使其正常工作：

Add children data to the $scope (for access in the 2nd ng-repeat ). 将children数据添加到$scope （用于第二次ng-repeat访问）。
Add default opened: false property to all repos (except the first, which is true ). 将默认的opened: false属性添加到所有repos（第一个除外，这是true ）。

This won't show the components, but hopefully you get the idea. 这不会显示组件，但希望你能得到这个想法。

See the Plunkr solution 请参阅Plunkr解决方案

Answer 2

If you want to inset row after row clicked use this: 如果要逐行插入行，请使用以下命令：

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

Angularjs - 如何在父行上单击时动态添加行

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-01-28 19:02:16

解决方案2
0 2017-01-28 16:15:30

Angularjs - 如何在父行上单击时动态添加行

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-01-28 19:02:16

解决方案2 0 2017-01-28 16:15:30

解决方案1
1 已采纳 2017-01-28 19:02:16

解决方案2
0 2017-01-28 16:15:30