更新特定嵌套ngRepeat上的limitTo值

Updating the limitTo value on a specific nested ngRepeat

本文关键字：上的 limitTo ngRepeat 嵌套 更新      更新时间：2023-09-26

我是AngularJS的新手，不得不在一个有嵌套的ngrepeat的应用程序中工作，就像下面这样。

<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。问题是，当我这样做的时候，它是添加3到.inner-pannel元素中的每一个.order-list。是否有一种方法，我可以改变orderFilerLimit变量基于id或类的元素，它附加到?

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

不需要在控制器中声明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>
相关文章：