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>

希望它可以幫助你。