Angular: Empty Fiddle
http://angularjs.org/
HTML
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>
<div ng:controller="ProjectListCtrl">
<pre>$location = {{$location}}</pre><br />
<p>Total Projects: {{total}}</p>
<p>Current Page: {{currentPage}}</p>
<br />
<ul>
<li ng:repeat="item in items">{{$index+1}} {{item.title}}</li>
</ul>
<br /> <br />
<p>Navigation:
<ul>
<li ng:repeat="page in pages"><span ng:click='clickNav()'>{{page}}</span></li>
</ul>
</p><br />
<br />
</div>
<br />
<br />
JavaScript
// goal = /project?page=1 and so on
// 2DO: how to change one hashSearch-parameter? (if sorting and other parameters are also there)
ProjectListCtrl = function($route, $location) {
this.$route = $route;
this.$location = $location;
console.log('Calling controller ProjectListCtrl');
// should be retrieved via json later (sending offset/limit to the server)
var fullList = [
{
'title': 'Project1'},
{
'title': 'Project2'},
{
'title': 'Project3'},
{
'title': 'Project4'},
{
'title': 'Project5'},
{
'title': 'Project6'},
{
'title': 'Project7'},
{
'title': 'Project8'},
{
'title': 'Project9'},
{
'title': 'Project10'},
{
'title': 'Project11'},
];
this.total = fullList.length;
this.currentPage = $location.hashSearch.page != undefined ? $location.hashSearch.page : 1;
// options, use later
var itemsPerPage = 2;
this.getItems = function() {
// 2DO: set limit/offset for query...
console.log('get items, page is:', this.currentPage);
return fullList;
}
this.getPages = function() {
// 2DO: calculation
return [1, 2]; // example
}
this.items = this.getItems();
this.pages = this.getPages();
this.clickNav = function() {
// how do i update just the hash, so that the controller reloads the data?
var pageClicked = this.page; //auto-magic? where does this come from?
console.log('clickNav, clicked page:', pageClicked,this.$location);
/*$location.updateHash($location.path, {
'page': pageClicked
});*/ //2DO: only update one param?
this.currentPage = pageClicked; // 2DO: does not change? (right way?)
}
}