javascript - escape - Submenú(árbol expandido/colapsado) en AngularJS

ng-bind-html angular 6

Question

Durante el último día me he quedado atascado en encontrar la mejor manera de usar angular para controlar una lista de menú con submenús.

Con jQuery, puede escuchar después de un evento de clic en un tipo específico de elemento como un <li> y agregar una clase a su elemento secundario para que se abra un menú.

Estoy tratando de hacer lo mismo que el menú en esta página http://geedmo.com/themeforest/wintermin/dashboard.html , con Angular. Pero no puedo encontrar la forma correcta usando mi propia directiva o las existentes como ng-hide y ng-show.

Si alguien tiene un ejemplo de guías sobre cómo hacer esto de la mejor manera, mi día se salvaría. :)

También soy nuevo en angular, así que aprendes cosas nuevas todos los días.

Answer 1

Puede usar el siguiente código para crear un submenú expandido / contraído en AngularJS.

He adjuntado un ejemplo de JSFiddle para ti.

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

Su controlador JS:

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

ACTUALIZAR:

He actualizado mi publicación debido a su comentario sobre, que cuando hacemos clic en el elemento del nuevo menú, el anterior debe colapsar.

Pequeños cambios en el código.

Nuevo JSFiddle con su necesidad.

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

Tu controlador JS:

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