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

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

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

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

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

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

Angular：将数据推送到嵌套数组中

3 个答案: