current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

Hi I would like to us if there you can point me to a correct sample code for Angularjs UI Bootstrap Pagination to customize the template?

I tried searching google and here in stackoverflow but I cannot find any correct example or explanation on how to use the template-url for pagination for this function component.

https://angular-ui.github.io/bootstrap/#/pagination

I want to change the cache template "template/pagination/pagination.html" to something like this one

<script type="text/ng-template" id="custompagination.html">
code here...
</script>

but it gave me an errors. If you have sample or tips that I can read online, please let me know.

Thanks,

share|improve this question
up vote 0 down vote

You should just be able to define your custom template in the HTML as follows:

<script type="text/ng-template" id="template/pagination/pagination.html">
  <div class="pager">
    <div class="page" ng-click="selectPage(page.number)" ng-repeat="page in pages" ng-class="{active: page.active, disabled: page.disabled}">{{page.text}}</div>
  </div>
</script>

and some CSS to style (if required):

div.page {
  float:left;
  background-color: #cccccc;
  width:20px;
  height:20px;
}

div.active {
  font-weight: bold;
  background-color: #ffffff;
}

You can override a template using the script directive. Because this has the same ID as the default Bootstrap pagination template, it will override it. See here for a demo.

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.