Skip to content

Commit f62856d

Browse files
dhiltdhilt
authored
Merge pull request #164 from angular-ui/grid-scopes-wrapping
Grid scopes wrapping
2 parents 20b0c91 + 9b8a383 commit f62856d

15 files changed

+2129
-1886
lines changed

‎demo/grid-scopes-wrapping/grid-scopes-wrapping.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Grid scopes wrapping</title>
6+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
7+
<script src="../../dist/ui-scroll.js"></script>
8+
<script src="../../dist/ui-scroll-grid.js"></script>
9+
<script src="grid-scopes-wrapping.js"></script>
10+
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
11+
<link rel="stylesheet" href="grid.css" type="text/css"/>
12+
</head>
13+
<body ng-controller="gridController" ng-app="application">
14+
<div class="cont cont-global">
15+
16+
<a class="back" href="../index.html">browse other examples</a>
17+
18+
<h1 class="page-header page-header-exapmle">Grid scopes wrapping</h1>
19+
20+
<div class="description">
21+
<p>Here we have ng-repeat wrapping ui-scroll-td directive!<p>
22+
</div>
23+
24+
<table class="grid" ui-scroll-viewport>
25+
<thead style="display:block">
26+
<tr>
27+
<th ng-repeat="col in columns" class="{{col}}" ui-scroll-th>{{col}}</th>
28+
</tr>
29+
</thead>
30+
<tbody>
31+
<tr class="row" ui-scroll="item in datasource" adapter="adapter">
32+
<td ng-repeat="col in columns" ui-scroll-td class="{{col}}">{{item[col]}}</td>
33+
</tr>
34+
</tbody>
35+
</table>
36+
37+
</div>
38+
</body>
39+
</html>

‎demo/grid-scopes-wrapping/grid-scopes-wrapping.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
angular.module('application', ['ui.scroll', 'ui.scroll.grid'])
2+
.controller('gridController', [
3+
'$scope', '$log', '$timeout', function ($scope, console, $timeout) {
4+
var datasource = {};
5+
6+
$scope.columns = ['col1','col2','col3'];
7+
8+
datasource.get = function (index, count, success) {
9+
$timeout(function () {
10+
var result = [];
11+
for (var i = index; i <= index + count - 1; i++) {
12+
result.push({
13+
col1: i,
14+
col2: 'item #' + i,
15+
col3: (Math.random() < 0.5)
16+
});
17+
}
18+
success(result);
19+
}, 100);
20+
};
21+
22+
$scope.datasource = datasource;
23+
24+
var clearLayout = [
25+
{index: 0, mapTo: 0, css: {backgroundColor: ''}},
26+
{index: 1, mapTo: 1, css: {backgroundColor: ''}},
27+
{index: 2, mapTo: 2, css: {backgroundColor: ''}}
28+
];
29+
30+
var someLayout = [
31+
{index: 0, mapTo: 2, css: {backgroundColor: '#ccc'}},
32+
{index: 1, mapTo: 1, css: {backgroundColor: '#ddd'}},
33+
{index: 2, mapTo: 0, css: {backgroundColor: '#eee'}}
34+
];
35+
36+
$scope.applyLayout = function () {
37+
$scope.adapter.gridAdapter.applyLayout(someLayout);
38+
};
39+
40+
$scope.clearLayout = function () {
41+
$scope.adapter.gridAdapter.applyLayout(clearLayout);
42+
};
43+
44+
}
45+
]);

‎demo/grid-scopes-wrapping/grid.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.grid {
2+
height: 300px;
3+
}
4+
5+
.grid tbody {
6+
width: 380px;
7+
}
8+
9+
hr {
10+
margin: 5px;
11+
}
12+
13+
.col1 {
14+
width: 80px;
15+
}
16+
17+
td.col1 {
18+
font-style: italic;
19+
}
20+
21+
.col2 {
22+
width: 200px;
23+
}
24+
25+
.col3 {
26+
width: 80px;
27+
}
28+
29+
input {
30+
margin-bottom: 5px;
31+
}

0 commit comments

Comments
 (0)