AngularJS Playground

Experimenting with AngularJS.

by nickxbs

HTML

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
  <div style="display: flex; flex-direction: row;padding: 5px;align-items:center">
    <button ng-repeat="page in pages" style="margin: 5px" ng-click="showPage(page)" >
      {{page}}
    </button>
    <div>
     current page: {{currentPage}}
    </div>
  </div>
    <div style="display: flex; flex-direction: column;">
    <div ng-repeat="item in itemsInPage" style="padding: 5px;" >
      {{item}}
    </div>
  </div>
</div>

JavaScript

'use strict';
var app = angular.module('angularTest', []);
var getItems=function(){
	var items=[]
  for(var i=0;i<100;i++){
    items.push({id:i, description: 'Test '+i})
  }
  return items;
}

var getItemsPromise=function(){
	var items=[]
  for(var i=0;i<100;i++){
    items.push({id:i, description: 'Test '+i})
  }
  return Promise.resolve(items);
}

app.controller('MainCtrl', ['$scope', function($scope) {
  var items=getItems();
  $scope.pages=[0,1,2,3,4,5,6,7,8,9];
  
  $scope.showPage=function(currentPage){  	
  	$scope.currentPage=currentPage;
    //TODO modificare questa riga assegnando a itemsInPage gli items filtrati per la pagina corrente
    //hai a disposizione anche lodash con la funzione _.filter
    $scope.itemsInPage=items;
  }
  $scope.showPage(0);
}]);
//1 - Prova a far stampare solo i primi 10 items 
//2 - Prova a far stampare i 10 items della pagina che hai selezionato cliccando su una delle pagine in alto
//3 - Prova ad aumentare la dimensione degli items e a far generare l’array delle pagine dinamicamente
//4 - Prova a trasformare il pager (la lista di bottoni) in 2 bottoni < (indietro) e > (avanti)
//5 - Prova a disabilitare indietro quando sei a pagina 0 e avanti quando sei all’ultima pagina
//6 - Prova a sostituire la getItems