javascript - Updating the limitTo value on a specific nested ngRepeat -
i'm new angularjs , having work on app has section of nested ngrepeats such 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 quite large @ times limit it. when user wants view more data specific section (which enumerated status) add 3 orderfilterlimit. problem when adding 3 every single .order-list in .inner-pannel element. there way can change orderfilerlimit variable based on id or class of element it's attached to?
for context here super simple snippet of loadmoreorderstolist() doing. https://jsbin.com/vapucixesa/1/edit?js
no need of declare orderfilterlimit inside controller, should have scope variable inside ng-repeat ng-repeat element have separate copy of orderfilterlimit because ng-repeat create 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>
Comments
Post a Comment