Skip to content

Commit

Permalink
add example of dynamic grouping
Browse files Browse the repository at this point in the history
  • Loading branch information
@esvit
esvit committed Nov 16, 2013
1 parent 58848cf commit 37c93bf
Showing 1 changed file with 71 additions and 47 deletions.
118 changes: 71 additions & 47 deletions examples/demo21.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,74 +18,98 @@
</head>
<body ng-app="main">

<h1>Dynamic columns</h1>
<h1>Dynamic grouping</h1>

<div ng-controller="DemoCtrl">

Columns:
<label class="checkbox" ng-repeat="column in columns">
<input type="checkbox" ng-model="column.visible" /> {{column.title}}
</label>
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" show-filter="true" class="table">
<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}}
</th>
<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-repeat="user in $data">
<td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field">
{{user[column.field]}}
<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) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.columns = [
{ title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } },
{ title: 'Age', field: 'age', visible: true }
];
$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: 10, // count per page
filter: {
name: 'M' // initial filter
}
count: 100 // count per page
}, {
total: data.length, // length of data
groupBy: $scope.groupby,
total: function () { return $scope.rows.length; }, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
$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>

Expand Down

0 comments on commit 37c93bf

Please sign in to comment.