CODEWITHSUNDEEP
javascriptcssangularjspagination
user5863037
user5863037

Reputation: 79

Pagination style in angular js

I am new to angular js. I want to know how to apply a style on a pagination box(view). The code below provides the rectangular box view. 

<!-- table here -->

<dir-pagination-controls max-size="2" direction-links="true"
 boundary-links="true"> </dir-pagination-controls>

I want to have the style below.

enter image description here

How can I add the above style in the angular pagination?

Upvotes: 0

Views: 2003

Answers (2)

Alexa
Alexa

Reputation: 77

 <dir-pagination-controls 
max-size="4" 
direction-links="true" 
boundary-links="true"
style="float:right; padding-right:10px;-moz-border-radius: 75px;-webkit-border-radius: 75px;">
</dir-pagination-controls>

Try this once.

Upvotes: 0

Andurit
Andurit

Reputation: 5762

Above you use directive for pagination. The thing is directive can have some separate logic and it also can have it own HTML template e.g.

angular.module('docsSimpleDirective', [])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

As you can see here template just some string but it easy can be html like:

template: '<divid="paginator"><span>1</span><span>2</span></div>'

So if you want to change how HTML looks like you need to add style in your CSS :)

If you have more complicated structure of website you can have a look at this question as well

You can find more about directives in here : https://docs.angularjs.org/guide/directive

Upvotes: 1

Related Questions