Question

我正在尝试构建一个简单的“寻呼机”应用，它允许您从一个json对象转到另一个json对象。

在重复之外添加上一个/下一个导航时，它可以正常工作。

当我尝试在ng-repeat中添加它时，我最终试图完成它，它不再翻阅。奇怪的是，我可以看到它正在做某事，因为如果你在开始/结束时，上一个/下一个按钮将被禁用。

这是演示此问题的演示： http://embed.plnkr.co/bR9BwrhDquvLV5TVMWtL/

ng-repeat内的代码（Top Prev / Next Buttons）：

<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-repeat之外的代码（Bottom Prev / Next Buttons）：

<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-repeat中完成这项工作吗？

Answer 1

ng-repeat为其迭代的每一行创建一个新范围。如果角度绑定中没有点，则curPage之类的基元将绑定到它们所在的范围。这意味着curPage每行内的ng-repeat是单独的变量，并且也与curPage之外的ng-repeat值分开。

要确保每个实例都指向同一个实例，您需要在父范围内绑定一个对象属性。

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

上一个/下一个项目按钮在Ng-Repeat中不起作用

1 个答案: