How to custom ui.bootstrap for pagination with angular.element

Question

I have this HTML generated by the pagination element:

<ul class="pagination ng-isolate-scope ng-valid" ng-change="gestTrt.pageChanged()" ng-model="gestTrt.currentPage" items-per-page="1" total-items="4" direction-links="false" aria-invalid="false">
  <li class="pagination-page ng-scope" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" ng-repeat="page in pages track by $index" style="">
  <li class="pagination-page ng-scope" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" ng-repeat="page in pages track by $index" style="">
  <li class="pagination-page ng-scope" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" ng-repeat="page in pages track by $index" style="">
  <li class="pagination-page ng-scope active" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" ng-repeat="page in pages track by $index" style="">
</ul>

I want to select each element to add a class. I tried:

angular.forEach(angular.element(document.querySelector(".pagination")).children(), function(value, key){
       value.addClass('active');

But I got "Error: value.addClass is not a function"

I printed the element with console.log(value): [object HTMLLIElement], [object HTMLLIElement] , [object HTMLLIElement] , [object HTMLLIElement] — Ciro
– Ciro, Commented Nov 26, 2015 at 9:39

georgeawg · Accepted Answer · 2015-11-26 09:47:34Z

1

The source code for UI pagination is here:

https://github.com/angular-ui/bootstrap/blob/master/src/pagination/pagination.js

AngularJS does jQuery type DOM manipulation with angular.element. The documentation for that is here:

https://docs.angularjs.org/api/ng/function/angular.element

After you have reviewed those, please return with a sample of your HTML and ask a more specific question.

UPDATE

It is easier to add a class to an element using the ng-class directive.

For more information on the ng-class directive see the AngularJS ngClass API Reference

edited Nov 26, 2015 at 9:47

answered Nov 25, 2015 at 15:27

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ciro · Accepted Answer · 2015-11-26 10:34:09Z

0

I resolved using angular.element(value);

answered Nov 26, 2015 at 10:34

Ciro

2632 gold badges6 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to custom ui.bootstrap for pagination with angular.element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related