agon024 agon024 - 3 months ago 24
AngularJS Question

AngularJS - ui-bootstrap pagination. Hide buttons on single page

I am using ui-bootstrap pagination and I want to hide the pagination controls when all the results are contained on a single page. As you can see in the picture below there is only one page and the controls are still showing. It seems like it would be common sense for the ui-bootstrap team to include this natively in the framework. So I'm thinking that there might be a way to do this easily but I wouldn't know where to start.

enter image description here

Here is the code in the controller:

$scope.itemsPerPage = 5;
$scope.currentPage = 1;
$scope.maxSize = 4;


Here is the HTML:

<div ng-controller="observedCars">
<div ng-repeat="obv in observed['Observed CARs'] | startFrom:(currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
<div class="carId">{{ obv['Display Name'] }}</div>
</div>
<ul uib-pagination total-items="observed['Observed CARs'].length" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()" max-size="maxSize"></ul>
</div>


I'm hoping that someone has already done this same thing and can help.

Thanks in advance.

Answer

use data-ng-show for the ul tag like

  <ul uib-pagination total-items="observed['Observed CARs'].length"  data-ng-show="observed['Observed CARs'].length > itemsPerPage" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()" max-size="maxSize"></ul>
Comments