Question

我对角度全新，我需要创建一个表格。数据数组如下： -

defaultConfig {//first step
        multiDexEnabled true
    }

dependencies {compile 'com.android.support:multidex:1.0.1'}//second

 @Override
protected void attachBaseContext(Context base) {
    super.attachBaseContext(base);
    MultiDex.install(this);//finally
}

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

例如： -

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

我如何实现这一目标？

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函数：

<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 {1}}与当前$scope.expanded值相同。

3c）最后，在$scope.expanded的第ng-if个<tr>标记的<tbody>指令中使用<table> <thead> <tr>  </tr> </thead> <tbody ng-repeat="(key, value) in data | groupBy: 'subject'"> <tr>  </tr> <tr ng-if="expanded === key">  </tr> </tbody> </table>变量来显示或隐藏嵌套学生数据：

TOP

<强>演示

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-click切换每一行，并使用相应的扩展内容（伪代码，我希望这个想法变得清晰）：

<form>
<httpCookies requireSSL="true" />

当您现在单击某一行时，它会切换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>

希望它对你有所帮助。

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

4 个答案: