更新特定嵌套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枚舉）時，我在orderFilterLimit添加3。 問題是，當我這樣做時，它.inner-pannel元素中的.inner-pannel .order-list加3。 有沒有一種方法可以根據其所附加元素的ID或類來更改orderFilerLimit變量？

對於上下文，這里是loadMoreOrdersToList()正在執行的操作的超簡單代碼段。 https://jsbin.com/vapucixesa/1/edit?js

Answer 1

無需在控制器內部聲明orderFilterLimit ，您應該在ng-repeat自身內部具有scope變量，以便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>