Angularjs - how to add a row dynamically when clicked on parent row

Question

I am new to angularjs and stuck with the below problem.

There will be a table of rows created which reads data from JSON. Say there are 6 rows displayed.But in real time number rows will vary.

Each row has an accordion(+ symbol) in its first 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.

Similarly for the remaining 5 rows as well it should display the children rows for the respective row's accordion is clicked.

I have created the table with the 6 rows displayed. 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

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

You want a 2nd <tr> with ng-repeat following the first:

<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 . The + button will toggle the opened property for each item. 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 ).
Add default opened: false property to all repos (except the first, which is true ).

This won't show the components, but hopefully you get the idea.

See the Plunkr solution

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 - how to add a row dynamically when clicked on parent row

Question

2 answers

solution1
1 ACCPTED 2017-01-28 19:02:16

solution2
0 2017-01-28 16:15:30

Angularjs - how to add a row dynamically when clicked on parent row

Question

2 answers

solution1 1 ACCPTED 2017-01-28 19:02:16

solution2 0 2017-01-28 16:15:30

solution1
1 ACCPTED 2017-01-28 19:02:16

solution2
0 2017-01-28 16:15:30