I trying to add sub menu by clicking the button but it doesn't work. My data looks like:

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

I trying to add sub menu by clicking the button but it doesn't work. My data looks like:

    $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

• javascript
• angularjs

Share Improve this question Follow asked Apr 29, 2016 at 12:33 kipriskipris 3,04544 gold badges2222 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Plunker Solution here

You need to modify the submenu button markup to pass the reference to the menu item that the button resides in:

<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>

and then in your addSubItem function operate directly on the item like this:

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

Also make sure that every time you create new item the children array is defined as empty array instead of being undefined:

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

I would remend using data value object that you can construct a new item with instead of using hand typed object literals as if you use them in many places it is easy to make mistake and cause bugs which happens only in some places and are time consuming to find.

You need to specify the index of the menuItems array that you wish to add the sub menu to.

This would add a sub menu to the first menu item:

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

Also, if this is of n depth and can vary depending on the data that is driving the menu, you could build a controller for the menu item and have it recursively add a child/show in your template based on the node you are clicking on. Then you don't need to explicitly worry about indexes.

firstly you should determine sub menu by it index. here you can use $index for this. when you add new Item just add item name. when you need add children array also.

<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>

and in controller

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