AngularJS - нажатие массива на объект в массиве

Question

Я не могу понять, как массировать массив в свойство объекта. Пробовал несколько разных способов и все еще не могу понять это. Что я хочу сделать, так это добавить menuitem в мое меню, а затем я хочу добавить подэлементы. Вот код. CodePen

var app = angular.module('app', []); 
 

 
     app.controller('appController', ['$scope', function($scope) { 
 

 
      $scope.pushChildren = function(child){ 
 
      $scope.menu[menu.length - 1].children.push({link:child,title:child}) 
 
      }; 
 
      
 
      $scope.pushMenu = function(link, title){ 
 
       $scope.menu.push({link:link,title:title,children:[]}) 
 
      }; 
 
      $scope.menu = [ 
 
       { 
 
        link: '/', 
 
        title: 'home' 
 
       }, 
 
       { 
 
        link: 'orders', 
 
        title: 'orders', 
 
        opened: true, 
 
        children: [ 
 
         { 
 
          link: '/open', 
 
          title: 'open', 
 
          selected: true 
 
         }, 
 
         { 
 
          link: '/closed', 
 
          title: 'closed' 
 
         }, 
 
         { 
 
          link: '/new', 
 
          title: 'new' 
 
         }, 
 
         { 
 
          link: '/forgotten', 
 
          title: 'forgotten' 
 
         } 
 
        ] 
 
       }, 
 
       { 
 
        link: '/users', 
 
        title: 'users' 
 
       }, 
 
       { 
 
        link: '/resources', 
 
        title: 'resources' 
 
       }, 
 
       { 
 
        link: '/settings', 
 
        title: 'settings', 
 
        children: [ 
 
         { 
 
          link: '/video', 
 
          title: 'video' 
 
         }, 
 
         { 
 
          link: '/sound', 
 
          title: 'sound' 
 
         }, 
 
         { 
 
          link: '/input', 
 
          title: 'input' 
 
         }, 
 
         { 
 
          link: '/other', 
 
          title: 'other' 
 
         }, 
 
        ] 
 
       } 
 
      ]; 
 

 
      $scope.activeTab = $scope.menu[1]; 
 
      $scope.onToggleTab = (event, targetTab) => { 
 
       event.preventDefault(); 
 

 
       if (!$scope.activeTab.children || $scope.activeTab.children.indexOf(targetTab) === -1) { 
 
        $scope.activeTab.opened = false; 
 
        $scope.activeTab.selected = false; 
 
       } 
 
       if ($scope.activeTab.children) { 
 
        $scope.activeTab.children.forEach(function(subtab) { 
 
         subtab.selected = false; 
 
        }); 
 
       } 
 

 
       if ($scope.menu.indexOf(targetTab) > -1) { 
 
        $scope.activeTab = targetTab; 
 
       } 
 

 
       if (targetTab.children) { 
 
        targetTab.opened = true; 
 

 
        return; 
 
       } 
 

 
       targetTab.selected = true; 
 
      }; 
 
     }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container" ng-app="app" data-ng-controller="appController"> 
 
    <div class="row"> 
 
     <nav class="col-md-2"> 
 
      <ul class="custom-menu nav nav-pills nav-stacked span2"> 
 
       <li> 
 
        <div class="form-group"> 
 
         <label for="search">Szukaj</label> 
 
         <input type="text" class="form-control" id="search" placeholder="Szukaj" data-ng-model="searchText"> 
 
        </div> 
 
       </li> 
 
       <li data-ng-repeat="tab in menu | filter: searchText" data-ng-class="{'active': tab.selected}"> 
 
        <a class="custom-menu-link" ng-href="{{ tab.link }}" ng-click="onToggleTab($event, tab);">{{ tab.title }}</a> 
 
        <ul class="custom-menu-submenu nav nav-pills nav-stacked span2" data-ng-if="tab.children" data-ng-show="tab.opened"> 
 
         <li data-ng-repeat="subtab in tab.children | filter: searchText" data-ng-class="{'active': subtab.selected}"> 
 
          <a class="custom-menu-link" ng-href="{{ subtab.link }}" data-ng-click="onToggleTab($event, subtab);">{{ subtab.title }}</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </nav> 
 

 
     <div class="col-md-10"> 
 
      <ul class="breadcrumb"> 
 
       <li data-ng-class="{'active': !activeTab.children}"> 
 
        <div class="dropdown" data-ng-if="activeTab.children" data-ng-class="{'open': dropdownOpened}"> 
 
         <button class="btn btn-primary dropdown-toggle" type="button" data-ng-click="dropdownOpened = !dropdownOpened" data-toggle="dropdown">{{ activeTab.title }} 
 
          <span class="caret"></span></button> 
 
         <ul class="dropdown-menu"> 
 
          <li data-ng-repeat="subtab in activeTab.children"> 
 
           <a data-ng-href="{{ subtab.link }}" data-ng-click="onToggleTab($event, subtab); $parent.dropdownOpened = false;">{{ subtab.title }}</a> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
        <span data-ng-if="!activeTab.children">{{ activeTab.title }}</span> 
 
       </li> 
 
       <li class="active" data-ng-if="subtab.selected" data-ng-repeat="subtab in activeTab.children"> 
 
        <span>{{ subtab.title }}</span> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <input type="text" placeholder="menu item" data-ng-model="title"> 
 
     <input type="text" placeholder="Link" data-ng-model="link"> 
 
     <input type="text" placeholder="child" data-ng-model="child"> 
 
     <p>{{title}},{{link}}</p> 
 
     <button class="btn-lg btn-danger" value="Push" data-ng-click="pushMenu(link,title)">Push</button> 
 
     <button class="btn-lg btn-danger" value="PushChildren" data-ng-click="pushChildren(child)">Push Children</button> 
 
    </div> 
 
</div>

Answer 1

Проблема заключается в меню не определено, изменить его, как это,

$scope.pushChildren = function(child){ 
    $scope.menu[$scope.menu.length - 1].children.push({link:child,title:child}) 
};