Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

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.

share|improve this question
    
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> – Jinna Balu Aug 26 at 19:43
up vote 1 down vote accepted

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>
share|improve this answer
    
Aaahhhh that did it! Thank you, thank you, thank you. I just learned something new. :) – agon024 Aug 26 at 19:51

You can do it manualy by adding ng-hide:

<div ng-controller="observedCars">
  <div ng-hide="observed['Observed CARs'].length == 1" 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>

This probably isn't the best way to do it and probably ui-bootstrap have a way to fix this, but I couldn't find it either.

Anyway, this way angular will check if there is only one element in there, if it's length is not 1 it will hide the div the same way it does when ng-repeat is empty.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.