Question

大家好我刚接触角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" }
    }        
};

这适用于页面导航，当我点击特定页面编号时，页面编号会突出显示。我想在点击上一个或下一个按钮时突出显示所选的页码。任何人都可以用相同的代码帮助我实现这个目标

如何使用angularjs突出显示分页中的选定项目？

0 个答案: