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）上的按钮，使之穿过key到onExpandClicked功能添加ng-click指令控制器上：

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

3b）在您的控制器中创建onExpandClicked功能：

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

这设置$scope上的一个值，该值可用于视图中以决定是否显示/隐藏学生数据的一部分。所述key被传递到函数作为name参数和$scope.expanded要么被设定为name或复位为""根据是否通过了name相同电流值$scope.expanded与否。

3C）最后，使用$scope.expanded变量在ng-if指令上的<tbody>第二<tr>标签以显示或隐藏嵌套学生数据：

<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

Answer 2

用html设计一个表格，用ng-repeat循环迭代你的data对象来显示数据。

ngRepeat

W3Schools的是如何以显示与AngularJS表

Angular Tables

Answer 3

首先，你应该用一个div结构代替实际的表上的一些基本的例子，因为它是不可能将两种类似你正在计划的桌子（当我得到你的权利）。

你可以切换每一行有像这样相应的扩展内容NG单击（伪代码，我希望这个想法得到明显）：

<div class="row-header"> 
    <span>RollNo</span> 
    <span>StudentName</span> 
</div> 

<div class="row-content" ng-if="!row_4_expanded" ng-click="row_4_expanded = !row_4_expanded"> 
    <span>4</span> 
    <span>xyz</span> 
</div> 

<div ng-if="row_4_expanded"> 
    <div class="row-expanded-header"> 
    <span>No of Students</span> 
    <span>Subject</span> 
    </div> 
    <div class="row-expanded-content"> 
    <span>1</span> 
    <span>Math</span> 
    </div> 
    <div class="row-expanded-content"> 
    <span>2</span> 
    <span>History</span> 
    </div> 
</div> 


<div class="row-content" ng-if="!row_2_expanded" ng-if="row_2_expanded" ng-click="row_2_expanded = !row_2_expanded"> 
    <span>2</span> 
    <span>pqr</span> 
</div> 

<div ng-if="row_2_expanded"> 
    <div class="row-expanded-header"> 
    <span>No of Students</span> 
    <span>Subject</span> 
    </div> 
    <div class="row-expanded-content"> 
    <span>1</span> 
    <span>Math</span> 
    </div> 
    <div class="row-expanded-content"> 
    <span>2</span> 
    <span>History</span> 
    </div> 
</div> 

现在，当您点击一行时，它切换presens与相应的扩展之一。

Answer 4

下面是一个解决您的问题的工作示例。

var indexCtrl = ['$scope', function($scope){ 
 
    $scope.num = 0; 
 
    $scope.test = [{rollno: 1,name: 'abc',subject: 'maths'}, 
 
     {rollno: 4,name: 'xyz',subject: 'history'}, 
 
     {rollno: 2,name: 'pqr',subject: 'history'} 
 
     ]; 
 
    $scope.changeShow = function(index){ 
 
    $scope.num = index; 
 
    }; 
 
}];

<!DOCTYPE html> 
 
<html ng-app> 
 
<head> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body ng-controller='indexCtrl'> 
 
<table> 
 
    <tr> 
 
    <td>Expand/Collapse</td> 
 
    <td>No of Students</td> 
 
    <td>Subject</td> 
 
    </tr> 
 
    <tr ng-repeat='i in test' ng-class="num == $index ? red : none">{{}} 
 
    <td ng-click='changeShow($index)'><a href="javascript:void(0)">click here</a></td> 
 
    <td>{{$index +1}}</td> 
 
    <td >{{i.subject}}</td> 
 
    </tr> 
 
</table> 
 
    <table> 
 
    <tr> 
 
    <td>RollNo</td> 
 
    <td>StudentName</td> 
 
    </tr> 
 
    <tr ng-repeat='i in test'> 
 
    <td ng-show='num == $index'>{{i.rollno}}</td> 
 
    <td ng-show='num == $index'>{{i.name}}</td> 
 
    </tr> 
 
</table> 
 
    <style> 
 
    table tr td{ 
 
     border: 1px solid black 
 
    } 
 
</style> 
 
</body> 
 
</html>

希望它可以帮助你。