角度：將數據推入嵌套數組

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

這里的柱塞解決方案

您需要修改子菜單按鈕標記，以將引用傳遞給按鈕所在的菜單項：

<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，並且可以根據驅動菜單的數據而有所不同，則可以為菜單項構建一個控制器，並使其基於您單擊的節點在模板中遞歸添加子項/顯示。 。 然后，您無需明確擔心索引。

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