如何利用嵌套ng-repeat结合外层$index动态设置节点数据？

嘿，我明白你的需求啦——外层循环遍历ipList展示IP，内层循环要根据外层的$index来动态使用node0、node1这类命名的数组，替代原来固定的node，对吧？这里有两种靠谱的解决方案供你参考：

方案一：模板内动态获取（快速实现） #

如果你不想改动太多控制器代码，可以直接在模板里利用$parent.$eval来动态拼接变量名，获取对应数组。注意要使用$parent来访问外层循环的$index，避免内层循环的$index干扰：

<div ng-repeat="ip in ipList track by $index">
  <div>
    <div class="box">
      <form action="">
        <table>
          <tbody>
            <!-- 动态拼接node+外层$index，获取对应的数组 -->
            <tr ng-repeat="n in $parent.$eval('node' + $parent.$index)">
              <td><input type="radio" name="column" /></td>
              <!-- 你的其他内容 -->
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>

方案二：控制器预处理（更优雅易维护） #

从Angular的最佳实践来说，尽量避免在模板里写复杂的动态表达式，我们可以在控制器里把ipList和对应的nodeX数组关联起来，让模板逻辑更清晰：

控制器代码： #

// 假设你已经定义了node0、node1、node2这些数组
$scope.node0 = ['选项1', '选项2', '选项3'];
$scope.node1 = ['选项A', '选项B', '选项C'];
$scope.node2 = ['选项X', '选项Y', '选项Z'];

// 把每个IP对应的node数组绑定到ip对象上
$scope.ipList.forEach(function(ip, index) {
  // 根据index获取对应的node数组，赋值给ip的nodes属性
  ip.nodes = $scope['node' + index];
});

修改后的模板： #

<div ng-repeat="ip in ipList track by $index">
  <div>
    <div class="box">
      <form action="">
        <table>
          <tbody>
            <!-- 直接遍历ip绑定好的nodes数组即可 -->
            <tr ng-repeat="n in ip.nodes">
              <td><input type="radio" name="column" /></td>
              <!-- 你的其他内容 -->
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>

这个方案的好处是模板逻辑更简洁，后续维护的时候也更容易理解数据结构，推荐优先使用哦～

内容的提问来源于stack exchange，提问作者Sumit Mehta