angular-table
Html
<table class="table table-striped" at-table at-paginated at-list="list" at-config="config">
<thead></thead>
<tbody>
<tr>
<td at-implicit at-sortable at-attribute="index" width="150" at-initial-sorting="asc"></td>
<td at-implicit at-sortable at-attribute="name" width="250"></td>
<td at-implicit at-sortable at-attribute="email"></td>
</tr>
</tbody>
</table>
<at-pagination at-list="list" at-config="config"></at-pagination>
Javascript
angular.module("angular-table-example").controller("basicExampleCtrl", ["$scope", function($scope) {
$scope.list = $scope.$parent.personList
$scope.config = {
itemsPerPage: 5,
fillLastPage: true
}
}]);
Add
Filter
$scope.itemsPerPage
$scope.maxPages
$scope.fillLastPage
{{config}}
Html
<table class="table table-striped" at-table at-paginated at-list="filteredList" at-config="config">
<thead></thead>
<tbody>
<tr>
<td at-implicit at-attribute="name" width="250"></td>
</tr>
</tbody>
</table>
<at-pagination at-list="filteredList" at-config="config"></at-pagination>
Javascript
angular.module("angular-table-example").controller("interactiveExampleCtrl", ["$scope", "$filter", function($scope, $filter) {
$scope.originalList = $scope.$parent.personList;
$scope.filteredList = $scope.originalList;
$scope.config = {
itemsPerPage: 5,
maxPages: 5,
fillLastPage: "yes"
};
$scope.add = function() {
$scope.originalList.push({name: $scope.nameToAdd});
$scope.updateFilteredList();
}
$scope.updateFilteredList = function() {
$scope.filteredList = $filter("filter")($scope.originalList, $scope.query);
};
}])
Using at-implicit
And at-attribute
<table class="table table-striped table-bordered"
at-table at-list="list">
<thead></thead>
<tbody>
<tr> <td at-implicit at-attribute="name"></td> </tr>
</tbody>
</table>
Using item
And Custom Markup
Hello {{item.name}} |
{{item.name.length}}
|
<table class="table table-striped table-bordered"
at-table at-list="list">
<thead></thead>
<tbody>
<tr>
<td at-title="Name">
Hello {{item.name}}
</td>
<td at-title="Length">
<code>{{item.name.length}}</code>
</td>
</tr>
</tbody>
</table>
Implicit Title
<table class="table table-striped table-bordered"
at-table at-list="list">
<thead></thead>
<tbody>
<tr> <td at-implicit at-attribute="name"></td> </tr>
</tbody>
</table>
No Header
<table class="table table-striped table-bordered"
at-table at-list="list">
<tbody>
<tr> <td at-implicit at-attribute="name"></td> </tr>
</tbody>
</table>
With at-title
Setting
<table class="table table-striped table-bordered"
at-table at-list="list">
<thead></thead>
<tbody>
<tr> <td at-implicit at-attribute="name" at-title="Handle"></td> </tr>
</tbody>
</table>
With Markup
Nickname |
---|
<table class="table table-striped table-bordered"
at-table at-list="list">
<thead>
<tr> <th at-attribute="name">Nickname</th> </tr>
</thead>
<tbody>
<tr> <td at-implicit at-attribute="name"></td> </tr>
</tbody>
</table>