[整理]Error: [ngRepeat:dupes]的解决方法

本文深入探讨了AngularJS中分页组件出现的错误原因,并提供了优化解决方案,包括避免ngRepeat错误、调整标签使用以及关键代码片段的修改。详细介绍了错误提示、错误解决过程以及改进后的代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

sdfsadf
<div class="pageNum middle PT10">
          <a href="javascript:void(0);" ng-show="pager.pageIndex>1" ng-click="pager.setFirstPage()">首页</a>
          <a href="javascript:void(0);" ng-show="pager.pageIndex>1" ng-click="pager.setPreviousPage()">上一页</a>
          <a href="javascript:void(0);" class="{{(page==pager.pageIndex)?'current':''}}" ng-repeat="page in pager.rangePages  " ng-click="pager.setPage(page)">{{page}}</a>          
          <a href="javascript:void(0);" ng-show="pager.pageIndex<pager.getMaxPages()" ng-click="pager.setNexPage()">下一页</a>
          <a href="javascript:void(0);" ng-show="pager.pageIndex<pager.getMaxPages()" ng-click="pager.setLastPage()">尾页</a>
 </div>
    updateRangePages: function(){
      var pageNums = []
      var curPage = this.pageIndex
      var maxPage =  this.getMaxPages()

      var begin = parseInt(curPage-5)>1?parseInt(curPage-5):1
      var end = parseInt(begin+10)>maxPage?maxPage:parseInt(begin+10)

      if(parseInt(curPage-5)>1){
          pageNums.push(1)
          pageNums.push('...')
      }

      while(begin<=end){
          pageNums.push(begin++)
         }
               
      /*
      页面出错
      Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.20/ngRepeat/dupes?p0=page%20in%20pager.rangePages&p1=string%3A...
      */
      try{
          if(end<maxPage){
                    pageNums.push('...')
              pageNums.push(maxPage)    
             }
        }
        catch(e){
            console.log(e)
        }
              
      delete this.rangePages
      this.rangePages = pageNums
    }

出现错误,什么原因呢?

http://errors.angularjs.org/1.2.20/ngRepeat/dupes?p0=page%20in%20pager.rangePages&p1=string%3A...

经确定,因为有相同的内容而重复引起,所以前端需修改下黄色标记。

<div class="pageNum middle PT10">
          <a href="javascript:void(0);" ng-show="pager.pageIndex>1" ng-click="pager.setFirstPage()">首页</a>
          <a href="javascript:void(0);" ng-show="pager.pageIndex>1" ng-click="pager.setPreviousPage()">上一页</a>
          <a href="javascript:void(0);" class="{{(page==pager.pageIndex)?'current':''}}" ng-repeat="page in pager.rangePages track by $index" ng-click="pager.setPage(page)">{{page}}</a>          
          <a href="javascript:void(0);" ng-show="pager.pageIndex<pager.getMaxPages()" ng-click="pager.setNexPage()">下一页</a>
          <a href="javascript:void(0);" ng-show="pager.pageIndex<pager.getMaxPages()" ng-click="pager.setLastPage()">尾页</a>
</div>

 

参考

http://blog.youkuaiyun.com/zml6308/article/details/38312347

https://docs.angularjs.org/error/ngRepeat/dupes

转载于:https://www.cnblogs.com/Benoly/p/4195087.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值