Question

我无法理解如何将数组推入对象属性。尝试了几种不同的方式，仍然无法弄明白。我想要做的是将menuitem添加到我的菜单，然后我想添加子项。这是一个codepen。 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})
};

AngularJS - 将数组推入数组中的对象

1 个答案: