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枚举）时，我向orderFilterLimit添加3。问题是，当我这样做时，它会在.order-list元素中的每个.inner-pannel添加3。有没有办法可以根据它附加到的元素的id或类来更改orderFilerLimit变量？

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

Answer 1

无需在控制器内声明orderFilterLimit，scope内部应该有ng-repeat变量，因此ng-repeat元素将具有orderFilterLimit的单独副本，因为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值

1 个答案: