javascript - Alavalikko (laajennettu/pienennetty puu) AngularJS:ssä

Olen viimeisen päivän ajan jumittunut löytämään parhaan tavan käyttää Angularia hallitsemaan valikkolistaa, jossa on alivalikkoja.

jQueryn avulla voit yksinkertaisesti kuunnella klikkaustapahtumaa tietyn tyyppisessä elementissä, kuten <li>, ja lisätä luokan sen alielementtiin, jotta valikko avautuu.

Yritän tehdä samaa asiaa kuin valikko tällä sivulla http://geedmo.com/themeforest/wintermin/dashboard.html, Angularilla. Mutta en löydä oikeaa tapaa käyttämällä omaa direktiiviäni tai olemassa olevia kuten ng-hide ja ng-show.

Jos jollakulla on esimerkki oppaista siitä, miten tämä tehdään parhaalla tavalla, päiväni olisi pelastettu. :)

Olen myös uusi Angularissa, joten opin uusia asioita joka päivä.

Vastaus #1

Voit käyttää seuraavaa koodia luodaksesi laajennetun/pienennetyn alivalikon AngularJS:ssä.

Olen liittänyt sinulle JSFiddle-esimerkin.

<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>

JS-ohjaimesi:

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"}
            ]
        }
    ];
};

PÄIVITYS:

Olen päivittänyt viestini kommenttisi vuoksi siitä, että kun napsautamme uuden valikon kohdetta, edellisen pitäisi supistua.

Pieniä muutoksia koodissa.

Uusi JSFiddle tarpeidesi mukaan.

<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>

Sinun JS-ohjaimesi:

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