如何为嵌套ng-repeat的limitTo动态赋值变量并独立控制增减？

我完全懂你遇到的困扰——两层嵌套ng-repeat里，原本想让每个子列表独立控制显示条数（初始10条），结果作用域里的变量被全局共享，一点击展开/收起按钮所有列表都跟着变，对吧？这是因为你之前把控制显示限制的变量放在了全局或父作用域里，所有子循环都共用同一个变量导致的。下面给你两种可行的解决方案：

方案1：给每个父循环对象添加独立的显示限制属性 #

这种方法需要在控制器里给每个父项绑定专属的showLimit属性，让每个子列表都对应自己的控制变量：

控制器代码示例 #

// 假设你的父级数据是parentItems，每个父项包含children子列表
angular.forEach($scope.parentItems, function(parentItem) {
  // 给每个父项初始化独立的显示限制，默认10条
  parentItem.showLimit = 10;
});

视图代码示例 #

<div ng-repeat="parent in parentItems">
  <h4>{{parent.categoryName}}</h4>
  <!-- 子列表绑定当前父项的showLimit -->
  <ul>
    <li ng-repeat="child in parent.children | limitTo: parent.showLimit">
      {{child.itemContent}}
    </li>
  </ul>
  <!-- 条件显示展开/收起按钮 -->
  <button 
    ng-if="parent.children.length > parent.showLimit"
    ng-click="parent.showLimit = parent.children.length">
    展开全部（共{{parent.children.length}}条）
  </button>
  <button 
    ng-if="parent.children.length === parent.showLimit && parent.children.length > 10"
    ng-click="parent.showLimit = 10">
    收起至10条
  </button>
</div>

这种方式的核心是把控制变量绑定到每个父循环的对象自身，避免了作用域变量的全局共享，每个子列表的控制逻辑完全独立。

方案2：用ng-init在子作用域创建独立变量 #

如果不想修改原始数据对象，可以用ng-init在每个父循环的子作用域里初始化独立的显示限制变量：

视图代码示例 #

<!-- 每个父循环的子作用域里初始化showLimit -->
<div ng-repeat="parent in parentItems" ng-init="showLimit = 10">
  <h4>{{parent.categoryName}}</h4>
  <ul>
    <li ng-repeat="child in parent.children | limitTo: showLimit">
      {{child.itemContent}}
    </li>
  </ul>
  <button 
    ng-if="parent.children.length > showLimit"
    ng-click="showLimit = parent.children.length">
    展开全部
  </button>
  <button 
    ng-if="parent.children.length === showLimit && parent.children.length > 10"
    ng-click="showLimit = 10">
    收起
  </button>
</div>

ng-init会在每个父循环生成的子作用域中创建单独的showLimit变量，这些变量互相隔离，不会出现全局递增的问题。

关键原理总结 #

不管用哪种方案，核心都是让每个循环项拥有独立的控制变量，要么绑定到循环对象的属性上，要么在子作用域中单独初始化，彻底避免全局作用域变量的共享问题，这样每个子列表的显示条数控制就完全独立了。

内容的提问来源于stack exchange，提问作者S.Negi