我正在尝试为ng-table实现扩展和折叠行，基本上我们想要的是如果你点击它扩展了更详细的行。有谁知道如何实现这个目标？
任何帮助表示感谢
// Code goes here
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams,$timeout) {
var data = [
{ticket: 1,Date: "24-3-2015", Status: "Pending" ,name: "Moroni", Agent: "cherrylabs1" , Item: "test1" , Description: "this is 1" ,age: 50},
{ticket: 2,Date: "25-3-2015", Status: "Pending" ,name: "Tiancum",Agent: "cherrylabs2" , Item: "test2" , Description: "this is 2" ,age: 43},
{ticket: 3,Date: "26-3-2015", Status: "Pending" ,name: "Jacob", Agent: "cherrylabs3" , Item: "test3" , Description: "this is 3" ,age: 27},
{ticket: 4,Date: "27-3-2015", Status: "Pending" ,name: "Nephi", Agent: "cherrylabs4" , Item: "test4" , Description: "this is 4", age: 29},
{ticket: 5,Date: "28-3-2015", Status: "Pending" ,name: "Enos", Agent: "cherrylabs5" , Item: "test5" , Description: "this is 5" ,age: 34},
{ticket: 6,Date: "29-3-2015", Status: "Pending" ,name: "Tiancum", Agent: "cherrylabs6" , Item: "test6" , Description: "this is 6" ,age: 43},
{ticket: 7,Date: "30-3-2015", Status: "Pending" ,name: "Jacob", Agent: "cherrylabs7" , Item: "test7" , Description: "this is 7" ,age: 27},
{ticket: 8,Date: "31-3-2015", Status: "Pending" ,name: "Nephi",Agent: "cherrylabs8" , Item: "test8" , Description: "this is 8" , age: 29}
];
$scope.columns = [
{ title: 'Ticket', field: 'ticket', visible: true },
{ title: 'Date', field: 'Date', visible: true },
{ title: 'Status', field: 'Status', visible: true },
{ title: 'Customer', field: 'name', visible: true },
{ title: 'Agent', field: 'Agent', visible: true },
{ title: 'Item', field: 'Item', visible: true },
{ title: 'Description', field: 'Description', visible: true }
];
$scope.$watch("filter.$", function () {
$scope.tableParams.reload();
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
filter: {
name: 'M' // initial filter
}
}, {
getData: function($defer, params) {
var filteredData = $filter('filter')(data, $scope.filter);
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
filteredData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$scope: $scope
});
})<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
<script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<div ng-controller="DemoCtrl">
<p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p>
<br >
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th ng-repeat="column in columns" ng-show="column.visible"
class="text-center sortable" ng-class="{
'sort-asc': tableParams.isSortBy(column.field, 'asc'),
'sort-desc': tableParams.isSortBy(column.field, 'desc')
}"
ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
{{column.title}}
<div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)" class="ng-scope ng-binding"></div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in $data"">
<td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field" style="text-align:center;">
{{user[column.field]}}
</td>
</tr>
</tbody>
</table>
</body>
</html>