1. 程式人生 > >AngularJS 分頁 點選當前頁新增樣式,其餘移除樣式

AngularJS 分頁 點選當前頁新增樣式,其餘移除樣式

分頁,前端框架是AngularJS,分頁的點選效果實現還是有點繞的。之前用jQuery寫,addClass和removeClass很快就實現點選效果了。AngularJS的點選效果實現如下(當前是第n頁的時候 n為選中的顏色 );

1.首先html部分:


ng-class就是用來切換樣式的指令,如果是true的時候,就顯示page-active選中,如果是false,就是page-normal正常樣式。後面中括號部分用來匹配true還是false。currentPage由後面controller給值。。

2.controller部分:


 // 忽略getUserList()方法

回到controller部分,這裡我們首先給num一個初始值1,這個是用來傳個初始值給$http請求的。currentPage是我們的當前頁,點選事件的時候,我們傳一個angular中的$event引數,把事件源物件的數值傳給num,就是我們點選的頁碼數。然後再把這個頁碼值賦給currentPage,也就是說,點選的時候,方括號裡的布林值就是true了,就可以新增點選樣式了,而其餘的,因為currentPage != num就是false,所以顯示的是正常的樣式

3.效果


 點選之後: