2017-04-07 30 views
0

我正在嘗試構建一個簡單的「pager」應用程序,它允許您從一個json對象到另一個json對象的頁面。上一頁/下一頁項目按鈕不能在Ng-Repeat內工作

在重複之外添加prev/next導航時,它工作正常。

當我嘗試在ng-repeat內添加它時,我最終試圖完成它,它不再通過頁面。奇怪的是,我可以看到它正在做一些事情,因爲如果你在開始/結束時prev/next按鈕將被禁用。

下面的演示說明問題: http://embed.plnkr.co/bR9BwrhDquvLV5TVMWtL/

NG重複內碼(首頁上一頁/下一頁按鈕):

<div class="a2a-accounts" ng-show="accounts.length"> 
    <div class="btn-group" role="toolbar" aria-label="First group"> 
     <a href="#" class="btn btn-link" ng-disabled="curPage == 0" ng-click="curPage=curPage-1"><i class="fa fa-chevron-left fa-2x"></i> Prev </a> 
     <a href="#" class="btn btn-link" ng-disabled="curPage >= accounts.length/pageSize - 1" ng-click="curPage = curPage+1"><i class="fa fa-chevron-right fa-2x"></i> Next </a> 
    </div> 
</div> 

NG-重複(底部上一頁/下一頁按鈕)之外的代碼:

<div class="pagination pagination-centered" ng-show="accounts.length"> 
    <ul class="pagination-controle pagination"> 
     <li> 
      <button type="button" class="btn btn-primary btn-block" ng-disabled="curPage == 0" ng-click="curPage=curPage-1"> &lt; PREV</button> 
     </li> 
     <li> 
      <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span> 
     </li> 
     <li> 
      <button type="button" class="btn btn-primary btn-block" ng-disabled="curPage >= accounts.length/pageSize - 1" ng-click="curPage = curPage+1">NEXT &gt;</button> 
     </li> 
    </ul> 
</div> 

有人可以解釋如何使這項工作在ng重複?

+0

閱讀關於範圍。你正在修改'ng-repeat'範圍內的'curPage'變量,並且你想在'$ parent'範圍內修改它。如果你不想閱讀範圍,那麼'$ parent.curPage = $ parent.curPage - 1'。 – fedeisas

+0

嗨@fedeisas,你可以更具體或共享一個鏈接或例子? –

+0

@fedeisas,抱歉,在添加有關添加$ parent的詳細信息之前,我必須評論。我也嘗試過,但我一定是錯誤地做了。謝謝! –

回答

1

ng-repeat爲迭代的每一行創建一個新的作用域。在您的角色綁定中沒有點,像curPage這樣的基元將被綁定到它們存在的範圍。這意味着ng-repeat的每一行內部的curPage是單獨的變量,並且還與ng-repeat以外的curPage值分開。

爲確保每個實例都指向相同的東西,需要在父範圍中綁定一個對象屬性。

http://plnkr.co/edit/VMrRqJxndVqIfkPAIMZf?p=preview

+0

如上所述的類似的響應。感謝你們兩位作爲一般經驗的 –

+0

,你應該**總是在角度綁定中使用一個點**。 – Claies

相關問題