Question

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

Answer 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与回购.Labels匹配，并且仅在回购的opened属性为true时显示。 +按钮将切换每个项目的opened属性。您需要对数据进行两次小修改才能完成这项工作：

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

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

See the Plunkr solution

Answer 2

如果要逐行插入行，请使用：

＆＃13;

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

＆＃13;

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

2 个答案: