Sous-menu (élargie et s'est effondré de l'arbre) en AngularJS

Que j'ai pour la journée en cours est resté coincé sur la recherche de la meilleure façon d'utiliser angulaire de contrôle de la liste de menu avec des sous-menus.

Avec jQuery, vous pouvez écouter juste après un événement de clic sur un type spécifique d'élément comme un <li> et ajouter une classe à son enfant de l'élément de menu pour l'ouvrir.

Je suis en train de faire la même chose tout comme le menu sur cette page http://geedmo.com/themeforest/wintermin/dashboard.html, Angulaire. Mais ne peut pas trouver la bonne façon en utilisant ma propre directive ou déjà existants comme ng-hide et ng-show.

Si quelqu'un a un exemple og guides sur la façon de le faire de la meilleure façon, ma journée aurait pu être sauvé. 🙂

Je suis également nouveau sur angulaire de l'apprentissage chose de nouveau chaque jour.

  • Salut Artyom, je vais essayer d'avoir mon menulist avec des sous-menus de fonctionnement que le menu sur le site que j'ai mentionné. Lorsque vous cliquez sur un lien du menu de la liste en vertu de son expansion, si vous cliquez sur un élément nouveau, l'ancien sous-menu se ferme et le nouveau sous-menu se développe. =)
InformationsquelleAutor Bent | 2014-10-26
  1. 8

    Vous pouvez utiliser le code suivant pour créer élargie et s'est effondré sous-menu sur AngularJS.

    J'ai attaché JSFiddle exemple pour vous.

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

    Votre JS contrôleur:

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

    Mise à JOUR:

    J'ai mis à jour mon post suite à votre commentaire à propos, que lorsque l'on clique sur la commande nouveau de l'élément précédent doit être effondrée.

    Petits changements dans le code.

    Nouveau JSFiddle avec votre besoin.

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

    Vous JS contrôleur:

    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
    ];
};
    • Salut merci pour cet exemple. Je soi que chaque exemple générer la liste des éléments de formulaire de la controlller, mais j'ai ma liste des éléments statiques en html. Aussi est-il un bon moyen de faire de l'autre liste qui sont ouverts pour la fermer, quand un nouvel élément de la liste est sélectionné. De sorte que vous n'avez qu'un sous-menu ouvert à la fois. =)
    • c'est une mauvaise idée pour AngularJS application pour créer des onglets/menu statique. Vous devez générer votre menu éléments de contrôleur ou de la directive.
    • veuillez voir ma mise à jour à propos de votre commentaire. J'espère, que c'est ce dont vous avez besoin 🙂
    • Merci pour tous les commentaires, exemples et d'une grande! =)
    InformationsquelleAutor Artyom Pranovich