подключение углового загрузчика пользовательского интерфейса к столу
Я работаю над настройкой угловой пагинации на создаваемом мной столе.
Я работал через документы. Однако я не вижу, как подключить нумерацию страниц к таблице. Мой размер пагинации соответствует размеру массива. Это правильное количество ссылок на кнопки для длины страницы. Тем не менее, мой стол все еще полон, поэтому я не могу проверить свою нумерацию страниц.
Вот мой столик
<tbody>
<tr ng-repeat="drink in editableDrinkList | orderBy:'-date'">
<td>[[drink.name]]</td>
<td>[[drink.date |date: format :timezone]]</td>
<td>[[drink.caffeineLevel]]</td>
<td>
<a ng-click="delete(drink._id)">
<i style="font-size:18px; margin-right:5%" class="fa fa-times"></i>
</a>
<a href="" ng-click="update(drink)">
<i style="font-size:22px;" class="fa fa-pencil-square-o"></i>
</a>
</td>
</tr>
</tbody>
Я установил свое тело за пределамитабличный тегЯ попробовал это внутри, но мои средства управления нумерацией страниц не появлялись.
Вот моя нумерация страниц
<pagination
total-items="totalItems"
ng-model="currentPage"
items-per-page="itemsPerPage"
ng-change="pageChanged()"
ng-click="setPage(currentPage)">
</pagination>
Я также создалтег p, чтобы убедиться, что вкладки отвечают
<div>
<p>total Items [[totalItems]]</p>
<p>itemsPerPage [[itemsPerPage]]</p>
<p>current page [[currentPage]]</p>
</div>
Общее количество элементов, элементов на страницу и текущая страница внутри paragraphare все реагируют на каждый щелчок на контроллере разбиения на страницы. Однако таблица не меняется.
Вот мой контроллер
var editabledrinkSet = function(){
editableArray = [];
DrinkLibrary.getAllDrinks().success(function(data){
for (var i = 0; i < data.length; i++) {
if(data[i].editable) {
editableArray.push(data[i])
};
};
$scope.currentPage = 1;
$scope.totalItems = editableArray.length;
$scope.itemsPerPage =10;
$scope.maxSize = 3;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
}
$scope.pageChanged = function() {
$log.log('Page changed to: ' + $scope.currentPage);
};
$scope.editableDrinkList = editableArray;
});
};
Когда я заработаю, я перенесу большую часть в директиву. Я просто хочу настроить его первым.