更新特定嵌套 ngRepeat 的 limitTo 值

Question

我是 AngularJS 的新手，必须开发一个具有嵌套 ngRepeats 部分的应用程序，如下所示。

<div class="title-bar" ng-repeat="orderType in someObj.orderTypes">
    <div class="inner-panel" ng-repeat="status in orderType.statuses">
        <p>{{status.Name}}</p>
        <div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
            <p>{{order.Stuff}}</p>
        </div>
        <button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="loadMoreOrdersToList()">Load More</button>
    </div>
</div>

status.Orders 列表有时可能会很大，所以我限制了它。当用户想要查看该特定部分（由 status 枚举）的更多数据时，我将 3 添加到 orderFilterLimit。问题是当我这样做时，它会向 .inner-pannel 元素中的每个 .order-list 添加 3。有没有一种方法可以根据它附加到的元素的 id 或 class 更改 orderFilerLimit 变量？

对于上下文，这是 loadMoreOrdersToList() 正在做的事情的超级简单片段。 https://jsbin.com/vapucixesa/1/edit?js

Answer 1

无需在控制器中声明 orderFilterLimit，您应该在 ng-repeat 本身中包含 scope 变量，以便它的 ng-repeat 元素将具有 [=11= 的单独副本] 因为 ng-repeat 在每次迭代时创建一个子作用域。

标记

<div class="title-bar" ng-repeat="orderType in someObj.orderTypes" ng-init="orderFilterLimit = 3">
    <div class="inner-panel" ng-repeat="status in orderType.statuses">
        <p>{{status.Name}}</p>
        <div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
            <p>{{order.Stuff}}</p>
        </div>
        <button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="orderFilterLimit = orderFilterLimit + 3">Load More</button>
    </div>
</div>

更新特定嵌套 ngRepeat 的 limitTo 值

Updating the limitTo value on a specific nested ngRepeat

html

javascript

angularjs

ng-repeat

angularjs-ng-repeat