Javascript Angularjs分页问题_Javascript_Jquery_Angularjs_Pagination

Javascript Angularjs分页问题

javascript jquery angularjs pagination

Javascript Angularjs分页问题,javascript,jquery,angularjs,pagination,Javascript,Jquery,Angularjs,Pagination,我试图加载页码并隐藏其中的一些，当我们分页时，我们隐藏并显示页码。我几乎完成了，但如果我第一次点击进入第3页，我的第1页就被打印出来了。我也发现了这个问题$触发打印第1页的scope.currentpage，但我也需要它。这是密码我还使用了jquery <body ng-app="app"> <div ng-controller="MainCtrl" > <ul class="check"> <li ng-class="{in

我试图加载页码并隐藏其中的一些，当我们分页时，我们隐藏并显示页码。我几乎完成了，但如果我第一次点击进入第3页，我的第1页就被打印出来了。我也发现了这个问题$触发打印第1页的scope.currentpage，但我也需要它。这是密码我还使用了jquery

<body ng-app="app">
  <div ng-controller="MainCtrl" >
    <ul class="check">
      <li ng-class="{inactive: currentPage == 0}" style="display:inline;" id="test">
        <a href="javascript:void(0);" ng-click="prevPage()">« Prev</a>
      </li>
      <li ng-re1peat="n in range"
        class="test"
        ng-class="{ visible : ($index < 5), invisible : ($index >= 5),active: n.number == (currentPage+1) }" style="display:inline;">
        <a href="javascript:void(0);"  ng-click="step($index)">{{n.number}}</a>
      </li>
      <li ng-class="{disabled: currentPage == pagedItems.length - 1}" style="display:inline;">
        <a href="javascript:void(0);" ng-click="nextPage()">Next »</a>
      </li>
    </ul>
  </div>
</body>

角js代码

<script>
var app=angular.module('app',[]);

app.controller('MainCtrl',function($scope){
$scope.currentPage=0;
    $scope.range= [
                    {number: "1"},
                    {number: "2"},
                    {number: "3"},
                    {number: "4"},
                    {number: "5"},
                    {number: "6"},
                    {number: "7"},
                    {number: "8"}
                ];


$scope.step=function(e)
{
    $scope.currentPage=e;
    if(e === 0){
        $scope.currentPage=e;
        $( ".check li#test" ).addClass("inactive");
        $( ".check li.test:eq(1)" ).removeClass("active");
    }
    else
    {
        $( ".check li#test" ).removeClass("inactive");
        var len=$('.check .test').length;
        if((e+1) === len)
        {
            var gtr=e+1;
            var i=e-4;
            pagePrint(len,gtr,i);
        }
        else
        {console.log(e);
            var gtr=e+4;
            var i=e-1;
            pagePrint(len,gtr,i);
        }               
    }
    $( ".check li.test:eq("+e+")" ).addClass("active");
};
$scope.prevPage=function(){
    var t=$scope.currentPage;alert(t);

    $scope.step(0);
    }
});
function pagePrint(len,gtr,m)
{
    for(var i=0;i<len;i++){
        $( ".check li.test:eq("+i+")" ).removeClass("visible");
        $( ".check li.test:eq("+i+")" ).addClass("invisible");
        $( ".check li.test:eq("+i+")" ).removeClass("active");
    }   
    while(m<gtr && m < len){
        $( ".check li.test:eq("+m+")" ).removeClass("invisible");
        $( ".check li.test:eq("+m+")" ).addClass("visible");
        m++;
    }
}

</script>

问题解决了！！css有些问题，脚本中有些逻辑变化！如果已修复，则必须发布解决方案。

<script>
var app=angular.module('app',[]);

app.controller('MainCtrl',function($scope){
$scope.currentPage=0;
    $scope.range= [
                    {number: "1"},
                    {number: "2"},
                    {number: "3"},
                    {number: "4"},
                    {number: "5"},
                    {number: "6"},
                    {number: "7"},
                    {number: "8"}
                ];


$scope.step=function(e)
{
    $scope.currentPage=e;
    if(e === 0){
        $scope.currentPage=e;
        $( ".check li#test" ).addClass("inactive");
        $( ".check li.test:eq(1)" ).removeClass("active");
    }
    else
    {
        $( ".check li#test" ).removeClass("inactive");
        var len=$('.check .test').length;
        if((e+1) === len)
        {
            var gtr=e+1;
            var i=e-4;
            pagePrint(len,gtr,i);
        }
        else
        {console.log(e);
            var gtr=e+4;
            var i=e-1;
            pagePrint(len,gtr,i);
        }               
    }
    $( ".check li.test:eq("+e+")" ).addClass("active");
};
$scope.prevPage=function(){
    var t=$scope.currentPage;alert(t);

    $scope.step(0);
    }
});
function pagePrint(len,gtr,m)
{
    for(var i=0;i<len;i++){
        $( ".check li.test:eq("+i+")" ).removeClass("visible");
        $( ".check li.test:eq("+i+")" ).addClass("invisible");
        $( ".check li.test:eq("+i+")" ).removeClass("active");
    }   
    while(m<gtr && m < len){
        $( ".check li.test:eq("+m+")" ).removeClass("invisible");
        $( ".check li.test:eq("+m+")" ).addClass("visible");
        m++;
    }
}

</script>