<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Append and prepend</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="append.js"></script>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
</head>
<body ng-controller="mainController" 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">Append and prepend demo</h1>
<div class="description">
<p>
This sample demonstrates an ability to append and prepend new items to the initial data set via adapter.
New appended and prepended items have to be synced and stored on the server side.
For this purpose a special Server factory was implemented to emulate the remote.
Three public methods are supported by this Server factory:<br/>
<ul>
<li>
<em>appendItem(params)</em> to add one new item (based on params) to the end of the remote data set,
</li>
<li>
<em>prependItem(params)</em> to add one new item (based on params) in the beginning of the remote data
set,
</li>
<li>
<em>request(index, count)</em> just to fetch a bunch of items for the viewport.
</li>
</ul>
The initial data set consists of 50 items and can be extended unlimitedly.
</p>
<p>
Then we have <em>adapter.append()</em> and <em>adapter.prepend()</em> methods to provide an injection of
just created item to the viewport. Note that in this demo new items would not be appended to the viewport if
the EOF (end of file) is not reached. Also new items would not be prepended to the viewport if the BOF
(begin of file) is not reached. This is very important to build proper UI. Follow the sources of the demo!
</p>
</div>
<div class="actions">
<button ng-click="prepend()">Prepend one item</button>
<button ng-click="append()">Append one item</button>
</div>
<br/>
<ul class="viewport2" ui-scroll-viewport>
<li ui-scroll="item in datasource" adapter="adapter">
<span class="title">{{item.content}}</span>
</li>
</ul>
</div>
</body>
</html>