Geek Answers Handbook

How to disable ui.bootstrap.pagination

I am using ui.bootstrap.pagination

I have a search box in the form on my page. I would like to disable the pagination control while someone interacts with the search field, then turn it back on as soon as they click on “Search”

I would like to use AngularJS form validation

ng-valid ng-invalid ng-pristine ng-dirty

How can I associate form validation with disabling pagination?

I could not figure out how to make the page control disabled and disable input. I also use Bootstrap 3.

TIA

+6
source share
2 answers

Support for the ngDisabled directive has been added to the pagination directive, just an hour ago ...;)

You should be able to block the entire pagination element from the outside. Suppose you have a variable with a name locked in your scope that indicates when pagination should be blocked. Then you can block it as follows:

 <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" ng-disabled="blocked" ></pagination>

Now, to use it, you yourself create a new version from the official repo .

+2
source

I will fully approximate here.

 <pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>

If your page has something similar, you can change it to something like this if your search form is called "searchForm":

 <pagination ng-class="{true:'', false:'disable'}[(searchForm.$valid)]" direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>

where disable is some CSS class that customizes pagination controls to make them disabled.

OR:

  <pagination ng-if="!searchForm.$valid" direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>

Use ng-if or ng-show / hide to switch the visibility of controls if the form is invalid.

0
source

More articles:


All Articles