All geek questions in one place

Angularjs - how to dynamically add a row when clicking on the parent row

I am new to angularjs and stuck with below problem.

A row table will be created that reads data from JSON. Say that 6 lines are displayed. But in real time, the number of rows will change.

Each string has an accordion (+ character) in its first td. If this accordion is clicked, then the children’s strings of this string should be displayed while reading data from another JSON.

Similarly, for the remaining 5 strings, it should display the child strings for the corresponding string accordion.

I created a table with 6 rows displayed. But the problem I am facing is how to dynamically bind child strings to existing strings when clicked. Here is 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>
+4
source share
2 answers

See Plunkr Solution

You want a second <tr>s ng-repeatafter the first:

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

, .Labels .Labels , repo opened true. + opened . :

  • children $scope ( ng-repeat).
  • opened: false ( , true).

, , , .

. Plunkr

+1

, :

<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>
Hide result
0

Source: https://habr.com/ru/post/1668114/

More articles:


All Articles