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