Угловой: вставлять данные в вложенный массив

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 действуют непосредственно на элемент, например th является:

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

Кроме того, если это н глубины и может изменяться в зависимости от данных, которые гонит меню, вы можете создать контроллер для пункт меню и рекурсивно добавить дочерний/показ в ваш шаблон на основе узла, на который вы нажимаете. Тогда вам не нужно явно беспокоиться об индексах.

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