<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<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.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<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" />
</head>
<body ng-app="main">
<h1>Dynamic grouping</h1>
<div ng-controller="DemoCtrl">
Group by:
<select ng-model="groupby">
<option value="name">Name</option>
<option value="age">Age</option>
<option value="role">Role</option>
<option value="date">Etc</option>
</select>
<br>
Grouped by: <b>{{groupby}}</b>
<table ng-table="tableParams" class="table">
<tbody ng-repeat="group in $groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{ group.value }}</strong>
</a>
</td>
</tr>
<tr ng-hide="group.$hideRows" ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
<td sortable="name" data-title="'Role'">
{{user.role}}
</td>
<td sortable="name" data-title="'Etc'">
{{user.date}}
</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
$scope.rows = [{name: "Moroni", age: 50, role: 'Administrator', date: '00/00/01'},
{name: "Tiancum", age: 43, role: 'Administrator', date: '00/00/01'},
{name: "Jacob", age: 27, role: 'Administrator', date: '00/00/01'},
{name: "Nephi", age: 29, role: 'Moderator', date: '00/00/01'},
{name: "Enos", age: 34, role: 'User', date: '00/00/01'},
{name: "Tiancum", age: 43, role: 'User', date: '00/00/01'},
{name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
{name: "Nephi", age: 29, role: 'Moderator', date: '00/00/01'},
{name: "Enos", age: 34, role: 'User', date: '00/00/01'},
{name: "Tiancum", age: 43, role: 'Moderator', date: '00/00/01'},
{name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
{name: "Nephi", age: 29, role: 'User', date: '00/00/01'},
{name: "Enos", age: 34, role: 'Moderator', date: '00/00/01'},
{name: "Tiancum", age: 43, role: 'User', date: '00/00/01'},
{name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
{name: "Nephi", age: 29, role: 'User', date: '00/00/01'},
{name: "Enos", age: 34, role: 'User', date: '00/00/01'},
{name: "Micah", age: 29, role: 'Moderator', date: '00/00/01'},
{name: "Viviane", age: 34, role: 'Moderator', date: '00/00/01'},
{name: "Marconi", age: 43, role: 'User', date: '00/00/01'},
{name: "Leonan", age: 27, role: 'Administrator', date: '00/00/02'},
{name: "Arnaldo", age: 29, role: 'User', date: '00/00/02'},
{name: "Zuleide", age: 34, role: 'Moderator', date: '00/00/02'}];
$scope.groupby = 'role'; //Default order IF null get table without groups(not possible ?)
//dinamic grouping
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 100 // count per page
}, {
groupBy: $scope.groupby,
total: function () { return $scope.rows.length; }, // length of data
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.rows, $scope.tableParams.orderBy()) : $scope.rows;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
$scope.$watch('groupby', function(value){
$scope.tableParams.settings().groupBy = value;
console.log('Scope Value', $scope.groupby);
console.log('Watch value', this.last);
console.log('new table',$scope.tableParams);
$scope.tableParams.reload();
});
})
</script>
</div>
</body>
</html>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
$scope.rows = [{name: "Moroni", age: 50, role: 'Administrator', date: '00/00/01'},
{name: "Tiancum", age: 43, role: 'Administrator', date: '00/00/01'},
{name: "Jacob", age: 27, role: 'Administrator', date: '00/00/01'},
{name: "Nephi", age: 29, role: 'Moderator', date: '00/00/01'},
{name: "Enos", age: 34, role: 'User', date: '00/00/01'},
{name: "Tiancum", age: 43, role: 'User', date: '00/00/01'},
{name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
{name: "Nephi", age: 29, role: 'Moderator', date: '00/00/01'},
{name: "Enos", age: 34, role: 'User', date: '00/00/01'},
{name: "Tiancum", age: 43, role: 'Moderator', date: '00/00/01'},
{name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
{name: "Nephi", age: 29, role: 'User', date: '00/00/01'},
{name: "Enos", age: 34, role: 'Moderator', date: '00/00/01'},
{name: "Tiancum", age: 43, role: 'User', date: '00/00/01'},
{name: "Jacob", age: 27, role: 'User', date: '00/00/01'},
{name: "Nephi", age: 29, role: 'User', date: '00/00/01'},
{name: "Enos", age: 34, role: 'User', date: '00/00/01'},
{name: "Micah", age: 29, role: 'Moderator', date: '00/00/01'},
{name: "Viviane", age: 34, role: 'Moderator', date: '00/00/01'},
{name: "Marconi", age: 43, role: 'User', date: '00/00/01'},
{name: "Leonan", age: 27, role: 'Administrator', date: '00/00/02'},
{name: "Arnaldo", age: 29, role: 'User', date: '00/00/02'},
{name: "Zuleide", age: 34, role: 'Moderator', date: '00/00/02'}];
$scope.groupby = 'role'; //Default order IF null get table without groups(not possible ?)
var getGroupBY = function(){
return $scope.groupby;
}
var gettable = function(){
if($scope.groupby !== null){
//dinamic grouping
return new ngTableParams({
page: 1, // show first page
count: 100 // count per page
}, {
groupBy: getGroupBY(),
total: function () { return $scope.rows.length; }, // length of data
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.rows, $scope.tableParams.orderBy()) : $scope.rows;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$scope: { $groups: {} }
});
}else{
//No grouping and not working too :(
return new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: function () { return $scope.rows.length; }, // length of data
getData: function($defer, params) {
$defer.resolve($scope.rows.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}
}
$scope.$watch('groupby', function(){
console.log('Scope Value', $scope.groupby);
console.log('Watch value', this.last);
$scope.tableParams = gettable();
console.log('new table',$scope.tableParams);
$scope.tableParams.reload();
});
//Dragable update groupby
$('th.header').draggable({ revert: true, helper: "clone" });
});
body {
padding: 10px !important;
}