<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table based scrollable list</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="../../dist/ui-scroll.js"></script>
<script src="tableScroller.js"></script>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
</head>
<body ng-app="application">
<div class="cont cont-global">
<a class="back" href="../index.html">browse other examples</a>
<h1 class="page-header page-header-exapmle">Table based scrollable list</h1>
<div class="description">
Since html container with ui-scroll attribute is repeatable there are some ways to build a template.
This sample demonstrates table based (<tr>) template usage.
<div class="code">
<pre>
<table ui-scroll-viewport>
<tr ui-scroll="item in datasource">
<td>{{$index}<!---->}</td>
<td>{{item}<!---->}</td>
</tr>
</table></pre>
</div>
And it needed to be said that we have special logic within ui-scroll sources to support table markup.
</div>
<div class="viewport" id="viewport-tableScroller" ui-scroll-viewport>
<table>
<tbody>
<tr ui-scroll="item in datasource">
<td>
{{$index}}
</td>
<td>
{{item}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>