更新特定嵌套ngRepeat上的limitTo值

Question

I'm new to AngularJS and having to work on an app that has a section of nested ngRepeats such as this below.

<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>

The status.Orders list can be quite large at times so I limit it. When a user wants to view more data for that specific section (which is enumerated by status ) I add 3 to the orderFilterLimit . The problem is when I do this it is adding 3 to every single .order-list in the .inner-pannel element. Is there a way I can change the orderFilerLimit variable based on an id or class of the element it's attached to?

For context here is a super simple snippet of what loadMoreOrdersToList() is doing. https://jsbin.com/vapucixesa/1/edit?js

Answer 1

No need of declare the orderFilterLimit inside controller, You should have scope variable inside ng-repeat itself so that it ng-repeat element will have separate copy of orderFilterLimit because ng-repeat create a child scope on each iteration.

Markup

<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>