大家好我刚接触角js我有下面的分页代码
<img src="../images/downloadprv.png" height="30px" width="30px" class="img-circle" ng-disabled="currentPage == 0" ng-click="goToPage(currentPage)" ng-style="prevStyle" title="Previous" data-toggle="tooltip" alt="prev" />
<p><a href="" ng-style="lstStyle" ng-repeat="pageNumber in numbers" ng-click="goToPage(pageNumber)">
<span ng-bind="pageNumber"></span></a></p>
<img src="../images/downloadnxt.jpg" height="30px" width="30px" class="img-circle" ng-disabled="currentPage >= numberOfPages-1" ng-click="currentPage=currentPage+1" ng-style="nxtStyle" title="Next" data-toggle="tooltip" alt="nxt" />
和以下代码填充数字列表
for (i = 0; i < $scope.numberOfPages; i++) {
if (i == 0) {
range = (i + 1) + "";
}
else {
range+=(i+1)+"";
}
$scope.numbers = range;
}
下面的页面导航代码
$scope.goToPage = function (page) {
$scope.currentPage = parseInt(page) - 1;
$scope.pageNumber = $scope.currentPage + 1
if ($scope.currentPage == 0) {
$scope.lstStyle = { "background-color": "gray", "display": "inline-block", "padding": "4px 8px", "text-align": "center", "font-size": "15px" }
$scope.prevStyle = { "float": "left" }
$scope.nxtStyle = { "float": "left", "cursor": "pointer" }
} else if ($scope.currentPage >= $scope.numberOfPages - 1) {
$scope.lstStyle = { "display": "inline-block", "padding": "4px 8px", "text-align": "center", "font-size": "15px" }
$scope.nxtStyle = { "float": "left" }
$scope.prevStyle = { "float": "left", "cursor": "pointer" }
} else {
$scope.lstStyle = { "background-color": "gray", "display": "inline-block", "padding": "4px 8px", "text-align": "center", "font-size": "15px" }
$scope.prevStyle = { "float": "left", "cursor": "pointer" }
$scope.nxtStyle = { "float": "left", "cursor": "pointer" }
}
};
这适用于页面导航,当我点击特定页面编号时,页面编号会突出显示。我想在点击上一个或下一个按钮时突出显示所选的页码。任何人都可以用相同的代码帮助我实现这个目标