javascript - Html/Angular 切换表格行以显示隐藏的表格

Question

我对 Angular 完全陌生，我需要创建一个表格。数据数组如下:-

data = [{rollno: 1,name: 'abc',subject: 'maths'},
        {rollno: 4,name: 'xyz',subject: 'history'},
        {rollno: 2,name: 'pqr',subject: 'history'}
       ];

我想创建一个包含一些基于此数据的摘要行的表，然后当我单击展开按钮时，子行应该出现在该摘要行下方，指示实际数据。

例如:-

Expand/Collapse | No of Students | Subject
 click here        1                Maths
 click here        2               History

例如，当我切换第二行上的展开/折叠按钮时，我希望实际行在其下方显示如下:-

 Expand/Collapse | No of Students | Subject
 click here        1                Maths
 click here        2               History
 RollNo | StudentName
   4       xyz
   2       pqr

我怎样才能实现这个目标？

Answer 1

1) 按主题对数据进行分组

首先，您需要按 subject 对数据进行分组然后计算每组中的项目。

您可以使用angular.filter模块的groupBy过滤器来执行此操作。

1a) 添加对该模块的依赖项，如下所示:

var app = angular.module("yourModuleName", ["angular.filter"]);

1b) 然后您可以使用 groupBy过滤 ng-repeat关于 <tbody> 的指令像这样的标签:

<tbody ng-repeat="(key, value) in data | groupBy: 'subject'">

1c) 您现在正在处理以下格式的数据。这是 key 的对象/value对其中 "maths"和"history"都是keys ，数组是 values

{
  "maths": [
    {
      "rollno": 1,
      "name": "abc",
      "subject": "maths",
    }
  ],
  "history": [
    {
      "rollno": 4,
      "name": "xyz",
      "subject": "history",
    },
    {
      "rollno": 2,
      "name": "pqr",
      "subject": "history",
    }
  ]
}

2)显示分组数据并统计每组中的项目

使用key和value将分组的数据显示在表格中，如下所示:

<table>
  <thead>
    <tr>
      <th>Subject</th>
      <th>Number of Students</th>
      <th>Expand/Collapse</th>
    </tr>
  </thead>
  <tbody ng-repeat="(key, value) in data | groupBy: 'subject'">
    <tr>
      <td>{{ key }}</td>
      <td>{{ value.length }}</td>
      <td>
        <button>
          Expand/Collapse
        </button>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <table>
          <thead>
            <tr>
              <th>Roll Number</th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="student in value">
              <td>{{ student.rollno }}</td>
              <td>{{ student.name }}</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

注意额外的<tr>和另一个嵌套表 ng-repeat用于显示学生数据。目前将显示所有嵌套的学生数据，下一步是根据单击的展开/折叠按钮有条件地显示/隐藏嵌套表。

3) 显示/隐藏嵌套的学生数据

3a) 添加 ng-click按钮上的指令，以便它传递 key到onExpandClicked Controller 上的功能:

<button ng-click="onExpandClicked(key)">
  Expand/Collapse
</button>

3b) 创建 onExpandClicked Controller 中的功能:

$scope.onExpandClicked = function(name){
  $scope.expanded = ($scope.expanded !== name) ? name : "";
}

这会在 $scope 上设置一个值可以在 View 中使用它来决定是否显示/隐藏学生数据的一部分。 key作为 name 传递到函数中参数和$scope.expanded将被设置为 name或重置为""取决于是否传入name与当前的$scope.expanded相同值与否。

3c) 最后，使用$scope.expanded ng-if 中的变量第二个指令<tr>标签 <tbody>显示或隐藏嵌套的学生数据:

<table>
  <thead>
    <tr>
      <!-- Omitted for brevity -->
   </tr>
  </thead>
  <tbody ng-repeat="(key, value) in data | groupBy: 'subject'">
    <tr>
      <!-- Omitted for brevity -->
    </tr>
    <tr ng-if="expanded === key">
      <!-- 
        Omitted for brevity 
      -->
    </tr>
  </tbody>
</table>

演示

CodePen: How to show/hide grouped data created by the angular.filter module's groupBy filter