Skip to content

Commit 750839d

Browse files
esvitesvit
committed
Fixed esvit#66
- add `data` field to ngTableParams - add example of row selection
1 parent 7635200 commit 750839d

File tree

5 files changed

+121
-6
lines changed

5 files changed

+121
-6
lines changed

‎examples/demo24.html

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]>
3+
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
4+
<!--[if IE 7]>
5+
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
6+
<!--[if IE 8]>
7+
<html class="no-js lt-ie9"> <![endif]-->
8+
<!--[if gt IE 8]><!-->
9+
<html class="no-js"> <!--<![endif]-->
10+
<head>
11+
<meta charset="utf-8">
12+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
13+
<meta name="viewport" content="width=device-width">
14+
15+
<link rel="stylesheet" href="css/bootstrap.min.css">
16+
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
17+
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
18+
<script src="js/angular.min.js"></script>
19+
<script src="../ng-table.src.js"></script>
20+
<link rel="stylesheet" href="../ng-table.css">
21+
</head>
22+
<body ng-app="main">
23+
24+
<h1>Table with row selection</h1>
25+
26+
<div ng-controller="DemoCtrl">
27+
28+
<div>
29+
<strong>Selected users:</strong> {{ data | filter:{"$selected": true} }}
30+
</div>
31+
<button class="btn btn-default" ng-click="tableParams.data[1].$selected = true">Select second row</button>
32+
33+
<table ng-table="tableParams" show-filter="true" class="table ng-table-rowselected">
34+
<tr ng-repeat="user in $data"
35+
ng-click="user.$selected = !user.$selected; changeSelection(user)"
36+
ng-class="{'active': user.$selected}">
37+
<td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
38+
{{user.name}}
39+
</td>
40+
<td data-title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">
41+
{{user.age}}
42+
</td>
43+
</tr>
44+
</table>
45+
46+
<style>
47+
.ng-table-rowselected tr {
48+
cursor: pointer;
49+
}
50+
</style>
51+
52+
<script>
53+
var app = angular.module('main', ['ngTable']).
54+
controller('DemoCtrl', function ($scope, $filter, ngTableParams) {
55+
var data = [
56+
{name: "Moroni", age: 50},
57+
{name: "Tiancum", age: 43},
58+
{name: "Jacob", age: 27},
59+
{name: "Nephi", age: 29},
60+
{name: "Enos", age: 34},
61+
{name: "Tiancum", age: 43},
62+
{name: "Jacob", age: 27},
63+
{name: "Nephi", age: 29},
64+
{name: "Enos", age: 34},
65+
{name: "Tiancum", age: 43},
66+
{name: "Jacob", age: 27},
67+
{name: "Nephi", age: 29},
68+
{name: "Enos", age: 34},
69+
{name: "Tiancum", age: 43},
70+
{name: "Jacob", age: 27},
71+
{name: "Nephi", age: 29},
72+
{name: "Enos", age: 34}
73+
];
74+
$scope.data = data;
75+
76+
$scope.tableParams = new ngTableParams({
77+
page: 1, // show first page
78+
count: 10, // count per page
79+
filter: {
80+
//name: 'M' // initial filter
81+
},
82+
sorting: {
83+
//name: 'asc' // initial sorting
84+
}
85+
}, {
86+
total: data.length, // length of data
87+
getData: function ($defer, params) {
88+
// use build-in angular filter
89+
var filteredData = params.filter() ?
90+
$filter('filter')(data, params.filter()) :
91+
data;
92+
var orderedData = params.sorting() ?
93+
$filter('orderBy')(filteredData, params.orderBy()) :
94+
data;
95+
96+
params.total(orderedData.length); // set total for recalc pagination
97+
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
98+
}
99+
});
100+
101+
$scope.changeSelection = function(user) {
102+
// console.info(user);
103+
}
104+
})
105+
</script>
106+
107+
</div>
108+
109+
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)