0

i am doing a pagination, now i have to do that, if i am currently on page my button must change color.

I have done so far:

<span ng-repeat="page in pagination(pages) track by $index">
  <button ng-class="{ changecolour: isActive(page) }" ng-click='loadProducts($index+1, pageSize)' class="btn btn-default">{{$index+1}}</button>
</span>

controller

$scope.isActive = function (page) {
  return page == page;
};

I know that it is wrong, can someone tell me how to do that??

31piy
  • 23,323
  • 6
  • 47
  • 67
Turqus
  • 117
  • 9
  • Possible duplicate of [Set active tab style with AngularJS](https://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs) – Kyle Krzeski Jun 29 '17 at 12:15

2 Answers2

0

You need to set the $scope.page value inside the function loadProducts($index+1, pageSize) whenever you click the button. Let's say your function be like this 

$scope.loadProducts = function(index, pageSize){
    //determine the page 
    $scope.page = index;
}

And use ng-class as 

ng-class="{ changecolour: isActive($index+1) }"

Now your isActive function will be 

$scope.isActive = function(page){
   return $scope.page === page;
}
Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
0

You can Do like this If you have page = page number. 

ng-class="{active: page == currentPage}"
Margi
  • 182
  • 1
  • 5