Question

我正在尝试加载分页数字并隐藏其中的一些，因为当我们分页时，我们隐藏了一个节目的页码。我几乎已经实现了它，但如果我在第一次点击时转到第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>

Css代码

.invisible{
  display:none !important;
}

.visible{
  display:inline !important;
}

.inactive a{
  text-decoration:none;
}

.active a{
  text-decoration:none;
}

Angular js code

<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>

Angularjs分页问题

0 个答案: