javascript - Untermenü (erweitertes/zusammengeklapptes Baumdiagramm) in AngularJS

Ich habe mich seit dem letzten Tag damit beschäftigt, den besten Weg zu finden, Angular zu verwenden, um eine Menüliste mit Untermenüs zu steuern.

Mit jQuery können Sie einfach nach einem Klickereignis auf einen bestimmten Elementtyp wie ein <li> zuhören und eine Klasse zu seinem Kindelement hinzufügen, damit ein Menü geöffnet wird.

Ich versuche, dasselbe zu machen wie das Menü auf dieser Seite http://geedmo.com/themeforest/wintermin/dashboard.html, mit Angular. Aber ich kann keinen richtigen Weg finden, indem ich meine eigene Direktive oder bestehende wie ng-hide und ng-show verwende.

Wenn jemand ein Beispiel für Anleitungen hat, wie man dies am besten macht, wäre mein Tag gerettet. :)

Ich bin auch neu bei Angular, also lerne ich jeden Tag etwas Neues.

Antwort #1

Sie können den folgenden Code verwenden, um ein erweitertes/zusammengeklapptes Untermenü in AngularJS zu erstellen.

Ich habe ein JSFiddle-Beispiel für dich beigefügt.

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in items" ng-click="showChilds(item)">
            <span>{{item.name}}</span>
            <ul>
                <li ng-repeat="subItem in item.subItems" ng-show="item.active">
                    <span>---{{subItem.name}}</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

Ihr JS-Controller:

function MyCtrl($scope) {    
    $scope.showChilds = function(item){
        item.active = !item.active;
    };

    $scope.items = [
        {
            name: "Item1",
            subItems: [
                {name: "SubItem1"},
                {name: "SubItem2"}
            ]
        },
        {
            name: "Item2",
            subItems: [
                {name: "SubItem3"},
                {name: "SubItem4"},
                {name: "SubItem5"}
            ]
        },
        {
            name: "Item3",
            subItems: [
                {name: "SubItem6"}
            ]
        }
    ];
};

AKTUALISIERUNG:

Ich habe meinen Beitrag aufgrund deines Kommentars aktualisiert, dass beim Klicken auf den neuen Menüpunkt der vorherige zusammengeklappt werden sollte.

Kleine Änderungen im Code.

Neues JSFiddle nach Ihrem Bedarf.

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in items" ng-click="showChilds($index)">
            <span>{{item.name}}</span>
            <ul>
                <li ng-repeat="subItem in item.subItems" ng-show="item.active">
                    <span>---{{subItem.name}}</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

Ihr JS-Controller:

function MyCtrl($scope) {    
    $scope.showChilds = function(index){
        $scope.items[index].active = !$scope.items[index].active;
        collapseAnother(index);
    };

    var collapseAnother = function(index){
        for(var i=0; i<$scope.items.length; i++){
            if(i!=index){
                $scope.items[i].active = false;
            }
        }
    };

    $scope.items = [
       // items array the same with the previous example
    ];
};