Javascript 角度：将数据推入嵌套数组

我试图通过单击按钮添加子菜单，但它不起作用。我的数据如下所示：

    $scope.menuItems = [
        {   name: 'Menu1',
            children: [
                { name: 'Sub1' },
                { name: 'Sub2'} ]
        },
        {   name: 'Menu1',
            children: [
                { name: 'Sub1' } ]
        }
    ];



   $scope.addSubItem = function() {
      $scope.menuItems.children.push({
      name: 'Test Sub Item'
      });
   };

---

您需要指定要添加子菜单的菜单项数组的索引

这将在第一个菜单项中添加一个子菜单：

$scope.menuItems[0].children.push({
  name: 'Test Sub Item'
});

---

此外，如果这是n个深度，并且可以根据驱动菜单的数据而变化，则可以为菜单项构建一个控制器，并让它根据您单击的节点在模板中递归地添加一个子/显示。然后，您不需要显式地担心索引。

首先，您应该通过索引确定子菜单。在这里，您可以使用$index进行此操作。添加新项目时，只需添加项目名称。当您还需要添加子数组时

<ul class="sub-menu">
    <li ng-repeat="menuItem in menuItem.children" ng-include="'sub-tree-renderer.html'"></li>
     <button class="btn btn-warning" style="margin-top: 10px;" ng-click="addSubItem($index)">Add Sub Menu Item</button>        
</ul>

您需要修改子菜单按钮标记，以传递对按钮所在菜单项的引用：

添加子菜单项

然后在addSubItem函数中，直接对项目进行如下操作：

$scope.addSubItem=函数（项）{
item.children.push({
名称：'子'+（item.children.length+1）
});
};

还要确保每次创建新项时，子数组都定义为空数组，而不是未定义：

$scope.addItem=function（）{
$scope.menuItems.push({
名称：“测试菜单项”，
儿童：[]
});
};

---

我建议使用数据值对象，您可以用它来构造一个新项目，而不是使用手工输入的对象文字，因为如果您在许多地方使用它们，则很容易出错并导致错误，这些错误只在某些地方发生，而且查找起来很费时。

谢谢，这很好。但是，如果我添加了新的菜单项，我就无法将子项添加到此菜单项中，只有答案没有多大帮助。你做了什么？为什么它能解决这个问题？传递$index不是一个好主意。传递对象并从对象获取索引是理想的。@SpykeBytes，因为如果您过滤或排序ng repeat，Angular会重新索引ng repeat，因此列表中的索引不再是数组中的索引。这里有一个主要的例子：我为菜单项和子菜单提供了不同的模板，所以我不使用递归模板

$scope.addSubItem = function(index) {
        $scope.menuItems[index].children.push({
            name: 'Test Sub Item'
            });
};


  $scope.addItem = function() {
     var item = {
           name: 'Test Menu Item',
          children: []
        };
        $scope.menuItems.push(item);
};