Angular：将数据推入嵌套数组

Question

我试图通过单击按钮添加子菜单，但它不起作用。

$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' 
     }); 
    }; 

http://plnkr.co/edit/2R5kpY2iGhiE6FEy65Ji?p=preview

Answer 1

Plunker Solution here

您需要修改的子菜单按钮标记通过引用该按钮位于菜单项：

<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(menuItem)">Add Sub Menu Item</button> 
</ul> 

然后在你的addSubItem函数中直接对像这样的项目进行操作是：

$scope.addSubItem = function(item) { 
     item.children.push({ 
     name: 'Sub' + (item.children.length + 1) 
     }); 
    }; 

另外，还要确保你每次创建子阵列被定义为空数组，而不是不确定的新项目：

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

我会建议使用数据值对象，你可以构造一个新的项目，而不是使用手型对象字面值，就好像您在许多地方使用它们一样，很容易出错并导致只在某些地方发生并且耗费时间才能找到的错误。

Answer 2

您需要指定您希望子菜单添加到的菜单项数组的索引：喜欢我的数据看起来。

这将增加一个子菜单的第一个菜单项：

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

此外，如果这是正深度，并能根据数据是推动菜单不同，你可以建立一个控制器菜单项，并根据您点击的节点递归添加小孩/节目。那么你不需要明确地担心索引。

Answer 3

首先你应该通过索引确定子菜单。在这里你可以使用$ 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> 

，并在控制器

$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); 
};