table с pagination на AngularJS

[rom30]

Ну кто-нибудь покажите РАБОТАЮЩИИ проект на AngularJS !!
Скажем надо просто таблица с "pagination" . Таблица показывает
данные из REST URL service (JSON)
REST URL service и она возвращает порцию!!! данных.
Хотелось бы чтобы при клике на ">" paginator-e таблица показывала
cледующую пришедшую порцию данных (JSON) и т.д.
При клике на "<" paginator-e таблица показывает "предыдущие" данные
(опять из REST URL service JSON-а ).
При клике на ">>" (last) paginator-e таблица показывает "последние" данные (опять из REST URL service JSON-а ).
Вычисления "порций" данных - на сервере, URL просто идет с параметрами типа "10 первых записей"

[ksa]

Хотелось бы чтобы при клике на ">" paginator-e таблица показывала
cледующую пришедшую порцию данных (JSON) и т.д.
При клике на "<" paginator-e таблица показывает "предыдущие" данные

В чем собственно проблема?
Задача для Ангулар тривиальная:
- при клике на "<>" запросить данные у сервера
- при получении данных изменить модель
Далее Ангулар все сделает сам.

Ну кто-нибудь покажите РАБОТАЮЩИИ проект на AngularJS

Вот кусок страницы "системная таблица", там есть листание, как построчно, так и постранично... И поиск... И много чего еще...

<form id='sys-find'>
	<table id='sys-table'>
		<thead>
			<tr id='sys-table-find'>
				<td ng-repeat='(i, tit) in define.title'>
					<div ng-hide='!define.find[i].code' class='sys-field' ng-class='define.find[i].class'>
						<div class='sys-field-input'>
							<input name='sys-find' id='sys-find{{i}}' type='text' ng-disabled='!define.find[i].code' />
						</div>
						<div ng-click='openDct(define.find[i].dct,i)' data-val='{{define.find[i].dct}}' class='sys-field-type'></div>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan='{{define.title.length}}'>
					<div id='sys-table-command' class='sys-table-command'>
						<div class='sys-table-command-container'>
							<button ng-click='find()' title='Выполнить поиск по "начинается"' class='sys-button' type='submit'>Начинается</button>
							<button ng-click='find(1)' title='Выполнить поиск по "содержит"' ng-hide='define.contains==0' class='sys-button'>Содержит</button>
							<button title='Очистить поисковые поля' class='sys-button' type='reset'>Очистить</button>
							<button title='Перечитать данные таблицы' class='sys-button' type='reset'>Обновить</button>
							<ul id='sys-table-access'>
								<li id='sys-table-access-edit' title='Переход в режим редактирования карточки'><span>Редактировать</span></li>
								<li id='sys-table-access-add' title='Добавить карточку'><span>Добавить</span></li>
								<li id='sys-table-access-del' title='Удалить карточку'><span>Удалить</span></li>
							</ul>
						</div>
						<div class='sys-table-command-container'>
							<button ng-class='tableBeg|condition' ng-click='upPage()' title='Предыдущая страница' class='sys-button'>&laquo;</button>
							<button ng-class='lineBeg|condition' ng-click='upLine()' title='Предыдущая строка' class='sys-button'>&lt;</button>
							<button ng-class='lineEnd|condition' ng-click='downLine()' title='Следущая строка' class='sys-button'>&gt;</button>
							<button ng-class='tableEnd|condition' ng-click='downPage()' title='Следущая страница' class='sys-button'>&raquo;</button>
						</div>
					</div>
				</td>
			</tr>
			<tr class='sys-table-head'>
				<td ng-repeat='(key, tit) in define.title'>{{tit.name}}</td>
			</tr>
		</thead>
		<tbody class='sys-table-data'>
			<tr ng-click='selectRow(i)' ng-repeat='(i, row) in data' ng-class='row|selected' data-urn='{{row.urn}}'>
				<td ng-repeat='(j, field) in row.fields' ng-class='field.class'>{{(field.value=='')? '&nbsp;': field.value}}</td>
			</tr>
		</tbody>
		<tbody>
			<tr>
				<td colspan='{{define.title.length}}'>
					<div id='sys-table-command-end' class='sys-table-command'>
						<div class='sys-table-command-container'>
							<button ng-class='tableBeg|condition' ng-click='upPage()' title='Предыдущая страница' class='sys-button'>&laquo;</button>
							<button ng-class='lineBeg|condition' ng-click='upLine()' title='Предыдущая строка' class='sys-button'>&lt;</button>
							<button ng-class='lineEnd|condition' ng-click='downLine()' title='Следущая строка' class='sys-button'>&gt;</button>
							<button ng-class='tableEnd|condition' ng-click='downPage()' title='Следущая страница' class='sys-button'>&raquo;</button>
						</div>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>

[ksa]

Вот контроллер... Там есть то самое "листание". А вот как брать данные на сервере - уже вопрос к твоей СУБДшке.

/* Контроллер */

var app = angular.module('app', []);

app.controller(
	'ctrl', 
	[
		'$scope',
		'$interval',
		'$http', 
		function($scope,$interval, $http) {
			$http.get('json/begin.csp').success(function(data) {
				for (key in data) {
					$scope[key] = data[key];
				};
			});
			$scope.base=$('#sys-base').val();
			var url='json/side.csp?base='+$scope.base;
			$http.get(url).success(function(data) {
				for (key in data) {
					$scope[key] = data[key];
				};
				var i=getIndex();
				getDefine($scope.side.list[i].code);
			});
			getMessage();
			getDate();
			var in_date=$interval(getDate,1000);
			var in_message=$interval(getMessage,3000);
			$scope.selectDctRow=function(N){
				/* Выбор строки справочника */
				var i=getDctRow();
				if (i==N) {
					i=$scope.dct.rows[N].grp;
					if (i=='') {
						$('#'+$scope.field).val($scope.dct.rows[N].value);
						$scope.closeDct();
					} else {
						var url='/soi/sys/json/dct.csp';
						url+='?code='+$scope.dct.code;
						url+='&group='+i;
						$http.get(url).success(function(data) {
							for (key in data) {
								$scope[key] = data[key];
							};
						});
					};
					return;
				};
				if (i!=undefined) {
					$scope.dct.rows[i].on=0;
				};
				$scope.dct.rows[N].on=1;
			};
			/* Номер текущей строки в таблице справочника */
			function getDctRow(){
				for(var i=0; i<$scope.dct.rows.length; i++){
					if ($scope.dct.rows[i].on==1){
						return i;
					};
				};
			};
			$scope.openDct=function(Code,N){
				/* Вызов справочника */
				if (Code=='') {
					return;
				};
				$scope.field='sys-find'+N;
				$('#sys-blackout').show();
				$('#sys-dictionary').show();
				var url='/soi/sys/json/dct.csp';
				url+='?code='+Code;
				$http.get(url).success(function(data) {
					for (key in data) {
						$scope[key] = data[key];
					};
				});
			};
			$scope.levelDct=function(){
				/* Вернуться в справочнике на уровень вверх */
				var url='/soi/sys/json/dct.csp';
				url+='?code='+$scope.dct.code;
				$http.get(url).success(function(data) {
					for (key in data) {
						$scope[key] = data[key];
					};
				});
			};
			$scope.closeDct=function(){
				/* Закрыть справочник */
				$scope.dct={};
				$('#sys-dictionary').hide();
				$('#sys-blackout').hide();
			};
			$scope.find=function(Type){
				/* Выполнить поиск */
				var url='json/find.csp';
				var prm=$('#sys-find').serialize()
				url+='?='+prm;
				url+='&type='+Type;
				url+='&base='+$scope.base;
				var ind=getIndex();
				ind=$scope.side.list[ind].code
				url+='&index='+ind;
				$http.post(url).success(function(data) {
					for (key in data) {
						$scope[key] = data[key];
					};
					$scope.data[0].on=1;
				});
			};
			$scope.upPage=function(){
				/* Перейти на предыдущую страницу */
				if ($scope.tableBeg==1) {
					return;
				};
				getData('page',-1);
			};
			$scope.downPage=function(){
				/* Перейти на следущую страницу */
				if ($scope.tableEnd==1) {
					return;
				};
				getData('page');
			};
			$scope.upLine=function(){
				/* Перейти на предыдущую строку */
				if ($scope.lineBeg==1) {
					return;
				};
				var i=getRow();
				if (i==undefined) {
					$scope.data[0].on=1;
					if ($scope.tableBeg==1) {
						$scope.lineBeg=1;
					};
					return;
				};
				if (i>0) {
					$scope.data[i].on=0;
					$scope.data[--i].on=1;
					$scope.lineEnd=0;
					if (($scope.tableBeg==1)&&(i==0)) {
						$scope.lineBeg=1;
					};
					return;
				};
				getData('line',-1);
			};
			$scope.downLine=function(){
				/* Перейти на следущую строку */
				if ($scope.lineEnd==1) {
					return;
				};
				var i=getRow();
				if (i==undefined) {
					$scope.data[$scope.data.length-1].on=1;
					if (($scope.tableEnd==1)&&((i+1)==$scope.data.length)) {
						$scope.lineEnd=1;
					};
					return;
				};
				if (i<($scope.data.length-1)) {
					$scope.data[i].on=0;
					$scope.data[++i].on=1;
					$scope.lineBeg=0;
					if (($scope.tableEnd==1)&&((i+1)==$scope.data.length)) {
						$scope.lineEnd=1;
					};
					return;
				};
				getData('line');
			};
			$scope.headButton=function(N){
				/* Нажали кнопку в верхнем меню */
				if ($scope.headBtns[N].id=='sys-head-menu') {
					top.location='/soi/sys/general/menu/page.csp?base='+$scope.base;
				};
			};
			$scope.selectRow=function(N){
				/* Смена текущей строки */
				if ($scope.data[N].on==1){
					return;
				};
				var i=getRow();
				if (i!=undefined) {
					$scope.data[i].on=0;
				}
				$scope.lineBeg=0;
				$scope.lineEnd=0;
				if ((N==0)&&($scope.tableBeg==1)) {
					$scope.lineBeg=1;
				}
				if ((N==($scope.data.length-1))&&($scope.tableEnd==1)) {
					$scope.lineEnd=1;
				}
				$scope.data[N].on=1;
				getRelations($scope.data[N].urn);
			};
			$scope.selectIndex=function(N){
				/* Смена индекса */
				if ($scope.side.list[N].on==1){
					return;
				};
				var i=getIndex();
				if (i!=undefined) {
					$scope.side.list[i].on=0;
				};
				$scope.side.list[N].on=1;
				getDefine($scope.side.list[N].code);
			};
			/* Запросить данные по структуре индекса */
			function getRelations(Urn){
				var url='json/relations.csp';
				url+='?base='+$scope.base;
				url+='&urn='+Urn;
				$http.post(url).success(function(data) {
					for (key in data) {
						$scope[key] = data[key];
					};
				});
			};
			/* Запросить данные по структуре индекса */
			function getDefine(Code){
				var url='json/define.csp';
				url+='?base='+$scope.base;
				url+='&index='+Code;
				$http.post(url).success(function(data) {
					for (key in data) {
						$scope[key] = data[key];
					};
					datepicker();
					getData();
				});
			};
			/* Страницу с данными по индексу картотеки */
			function getData(Type,Order){
				Type=Type||'init';
				Order=Order||1;
				var url='json/data.csp';
				url+='?base='+$scope.base;
				var ind=getIndex();
				ind=$scope.side.list[ind].code
				url+='&index='+ind;
				url+='&type='+Type;
				url+='&order='+Order;
				$http.post(url).success(function(data) {
					for (key in data) {
						$scope[key] = data[key];
					};
					if (Type=='line') {
						var i=(Order==1)? $scope.data.length-1: 0;
						$scope.data[i].on=1;
					};
				});
			};
			/* Номер текущей строки в таблице */
			function getRow(){
				for(var i=0; i<$scope.data.length; i++){
					if ($scope.data[i].on==1){
						return i;
					};
				};
			};
			/* Номер текущего индекса */
			function getIndex(){
				for(var i=0; i<$scope.side.list.length; i++){
					if ($scope.side.list[i].on==1){
						return i;
					};
				};
			};
			/* Запросить серверную дату и время */
			function getDate(){
				$http.get('/soi/sys/json/date.csp').success(function(data) {
					for (key in data) {
						$scope[key] = data[key];
					};
				});
			};
			/* Запросить список сообщений */
			function getMessage(){
				$http.get('/soi/sys/json/message.csp').success(function(data) {
					for (key in data) {
						$scope[key] = data[key];
					};
				});
			};
		}
	]
);
/* Для выделения элементов списка/таблицы */
app.filter(
	'selected', 
	function(){
		return function(Obj){
			return (Obj.on==1)? 'sys-on': '';
		}
	}
);
/* Состояние кнопок навигации по списку/таблице */
app.filter(
	'condition', 
	function(){
		return function(Value){
			return (Value==1)? 'sys-off': '';
		}
	}
);
/* Тип пиктограммы в окне справочника */
app.filter(
	'dictionary', 
	function(){
		return function(Value){
			Value=Value.charAt(0).toLowerCase();
			return (Value=="d")? "sys-dct2": "sys-dct1";
		}
	}
);