angular ng-click ternary conditional

Question

I'm making a pagination system with the "next" button. The "next" button should increase the page.currentPage variable, but it should not do anything when it reached the maximum numPagesTotal.

How do I add this condition to the following ng-click expression:

<a ng-click="page.currentPage = page.currentPage + 1">Next</a>

I figured that I need another block variable that is set to true when page.currentPage === numPagesTotal, and do something like below:

<a ng-click="block || page.currentPage = page.currentPage + 1">Next</a>

How do I set block in the ng-click?

jsFiddle, for reference

Can you explain what is the expected result? if the current page is the last page you dont want to show the next button? — Or Guz
– Or Guz, Commented Feb 20, 2015 at 17:37
I would move all this logic to the controller so your UI just has ng-click=pageUp(). — Ben Felda
– Ben Felda, Commented Feb 20, 2015 at 17:39
if 'currentPage == NumPagestotal', so maybe desactive the ng-click or something, because now they currentPage can be higher to number pages and this is bad — marjes
– marjes, Commented Feb 20, 2015 at 17:41
@marjes, I have edited your question to better explain the objective. — New Dev
– New Dev, Commented Feb 20, 2015 at 17:43
Ben, I thought of that option, but i need work with multiple tables, i need create Page1_UP, Page2_UP, Page3_up....etc, and multiple vars and i dont wanna make that — marjes
– marjes, Commented Feb 20, 2015 at 17:44

New Dev · Accepted Answer · 2015-02-20 17:45:03Z

1

You are approaching the problem correctly. You don't even need the extra block variable. Just do this:

<a ng-click="page.currentPage === numPagesTotal || (page.currentPage = page.currentPage + 1)">next</a>

But I would recommend, for clarity of the View, to make this determination in the controller:

$scope.next = function(){
   if ($scope.page.currentPage < $scope.numPagesTotal){
      $scope.page.currentPage++;
   }
}

and just call that function:

<a ng-click="next()">next</a>

answered Feb 20, 2015 at 17:45

New Dev

49.8k12 gold badges99 silver badges141 bronze badges

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

2 Comments

marjes Over a year ago

thanks, it work too, but i try it, only in html side,

Mark Pieszak - Trilon.io Over a year ago

This is a cleaner way and separates the logic from the view. Much better to go this way than doing it in the HTML. IMHO

Nicholas Hirras · Accepted Answer · 2015-02-20 17:41:29Z

0

I think this does what you want.

<a ng-click="page.currentPage >= numPagin || (page.currentPage=page.currentPage+1)">next</a>

answered Feb 20, 2015 at 17:41

Nicholas Hirras

2,5962 gold badges23 silver badges28 bronze badges

1 Comment

marjes Over a year ago

i hate "(", I try to do the same but without the parentheses, thanks Nicholas , this work

user3571683 · Accepted Answer · 2015-02-20 17:46:39Z

0

This may help you

{{(curPage*pageSize)+1}}-{{records=pageSize>count?count:(curPage == pagesCount-1) ? count:(curPage + 1)*pageSize}} of {{ count }}

answered Feb 20, 2015 at 17:46

user3571683

412 bronze badges

Collectives™ on Stack Overflow

angular ng-click ternary conditional

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related