2

Hola comunidad estoy tratando de crear un menu desplegable en un sideBar para la parte administrativa. El problema que resulta es que cuando hago click en un sub-menu se despliegan todos los sub-menus y viceversa. Aquí esta mi código. Espero que puedan ayudarme.

<div class="side-bar hide-on-med-and-down">
    <div class="row profile-side-bar">
        <div class="col s4">
            <img class="circle responsive-img" ng-src="assets/img/avatar.jpg">
        </div>
        <div class="col s8">
            <p>User Name</p>
            <small>Administrador</small>
        </div>
    </div>
    <ul>
        <li><a class="white-text" ng-click="openBar = !openBar"><i class="material-icons">menu</i> <span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">MENÚ</span></a></li>
        <li><a href=""><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">Texto menu</span></a></li>
        <li class="sub-nav">
            <a ng-click="childrenOpen = !childrenOpen"><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">Texto menu</span><i class="nav-down material-icons">keyboard_arrow_down</i></a>
            <ul class="children" ng-class="{'show-children':childrenOpen,'hide-children':!childrenOpen}">
                <li><a href="#">Item #1</a></li>
                <li><a href="#">Item #2</a></li>
                <li><a href="#">Item #3</a></li>
                <li><a href="#">Item #4</a></li>
            </ul>
        </li>
        <li><a href=""><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">Texto menu</span></a></li>
        <li class="sub-nav">
            <a ng-click="childrenOpen = !childrenOpen"><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">Texto menu</span><i class="nav-down material-icons">keyboard_arrow_down</i></a>
            <ul class="children" ng-class="{'show-children':childrenOpen,'hide-children':!childrenOpen}">
                <li><a href="#">Item #1</a></li>
                <li><a href="#">Item #2</a></li>
                <li><a href="#">Item #3</a></li>
                <li><a href="#">Item #4</a></li>
            </ul>
        </li>
    </ul>
</div>

Al hacer click se despliega los dos class="sub-nav", esto es lógico porque cambia el $scope, pero como podría hacer que solo se despliege el submenu donde hice click. Gracias por sus amables respuestas

3
  • 2
    Como recomendación: utiliza plunkr o codepen para ver una vista previa de la funcionalidad. Commented el 11 jul. 2016 a las 14:31
  • 1
    Tu sidebar tiene un controller o forma parte de una directiva?
    – devconcept
    Commented el 11 jul. 2016 a las 14:43
  • Gracias por las recomendaciones, si esta dentro de un controller pero no hay nada en este ya que no hace falta por que el ng-click solo me devuelve verdadero o falso pero se despliega los dos submenus y alguna vez mire en un video que solo se activa el sub-menu donde presiono click Commented el 11 jul. 2016 a las 15:21

3 respuestas 3

3

Usualmente los sidebars los puedes construir a partir de objetos ya que agregar y quitar objetos es mucho más sencillo(salvo algunas ocasiones) que manipular todo el html.

Te dejo un ejemplo donde escribí dos directivas, una para el componente sidebar y otra para cada menuitem que permite mantener la lógica de cada componente por separado. Ahora es solo cuestión de agregar y quitar elementos y customizar a tu gusto.

angular.module('app', [])
  .directive('sidebar', function(menuitems) {
    return {
      restrict: 'EA',
      template: '<ul class="sidebar">' +
        '<li class="menuitem" ng-class="{active: item.active, subitems: !!item.subitems}" ng-repeat="item in menuitems" ng-click="toogleItem($index)">' +
        '<a ng-href="{{item.href}}" ng-if="item.href">{{item.title}}</a>' +
        '<menuitem item="item" ng-if="!item.href"></menuitem>' +
        '</li>' +
        '</ul>',
      link: function($scope) {
        $scope.menuitems = menuitems;

        $scope.toogleItem = function(index) {
          $scope.menuitems.forEach(function(item, idx) {
            item.active = index === idx && (!item.active || !item.subitems);

            if (!item.active && item.subitems) {
              item.subitems.forEach(function(si) {
                si.active = false;
              });
            }
          });
        }
      }
    };
  })
  .directive('menuitem', function() {
    return {
      restrict: 'EA',
      scope: {
        item: '='
      },
      template: '<span>{{item.title}}</span>' +
        '<ul ng-if="item.subitems" ng-show="item.active">' +
        '<li class="menuitem sub" ng-repeat="subitem in item.subitems" ng-class="{active: subitem.active}" ng-click="toogleSubItem($event, $index)">' +
        '<a ng-href="{{subitem.href}}" ng-if="subitem.href">{{subitem.title}}</a>' +
        '<span ng-if="!subitem.href">{{subitem.title}}</span>' +
        '</li>' +
        '</ul>',
      link: function($scope, $element) {
        $scope.toogleSubItem = function($event, index) {
          $event.stopPropagation();
          $scope.item.subitems.forEach(function(item, idx) {
            item.active = index === idx;
          });
        }
      }
    };
  })
  .factory('menuitems', function() {
    return [{
      title: 'Item1',
      href: '#item1'
    }, {
      title: 'Item2',
      subitems: [{
        title: 'Subitem 1',
        href: '#subitem 1'
      }, {
        title: 'Subitem 1',
        href: '#subitem 1'
      }]
    }, {
      title: 'Item3',
      href: '#item3'
    }];
  });
ul {
  list-style: none;
  padding: 0;
}
a,
a:visited,
a:hover {
  text-decoration: none;
  color: white;
}
ul.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 200px;
  background-color: #322f30;
  color: white;
}
.menuitem {
  position: relative;
  padding: 10px;
  margin: 0;
  cursor: pointer;
}
.menuitem.active {
  background-color: #238db0;
}
.menuitem.active:hover {
  background-color: #238db0;
}
.menuitem:hover {
  background-color: royalblue;
}
.menuitem.subitems:after {
  content: '˅';
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  bottom: 0;
  padding-top: 10px;
}
.menuitem.sub.active {
  background-color: #0c3441;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <sidebar></sidebar>
</div>

0

Necesitarías dos atributos dentro de tu modelo, uno para cada menú, de forma tal de modificar el correcto. Algo así:

<ul>
    <li><a class="white-text" ng-click="openBar1 = !openBar1"><i class="material-icons">menu</i> <span ng-class="{'text-open-side-bar': !openBar1, 'text-close-side-bar': openBar1}">MENÚ</span></a></li>
    <li><a href=""><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar1, 'text-close-side-bar': openBar1}">Texto menu</span></a></li>
    <li class="sub-nav">
        <a ng-click="childrenOpen1 = !childrenOpen1"><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar1, 'text-close-side-bar': openBar1}">Texto menu</span><i class="nav-down material-icons">keyboard_arrow_down</i></a>
        <ul class="children" ng-class="{'show-children':childrenOpen1,'hide-children':!childrenOpen1}">
          ..
        </ul>
    </li>
    <li><a href=""><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar2, 'text-close-side-bar': openBar2}">Texto menu</span></a></li>
    <li class="sub-nav">
        <a ng-click="childrenOpen2 = !childrenOpen2"><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar2, 'text-close-side-bar': openBar2}">Texto menu</span><i class="nav-down material-icons">keyboard_arrow_down</i></a>
        <ul class="children" ng-class="{'show-children':childrenOpen2,'hide-children':!childrenOpen2}">
          ...
        </ul>
    </li>
</ul>

Así cada atributo está relacionado con el elemento correcot

2
  • mm la solución esta muy bien pero esta el inconveniente que si el menu sigue creciendo tengo que seguir agregando números para cada submenu hay alguna manera de hacer algo como: // Mostramos y ocultamos submenus $('.submenu').click(function(){ $(this).children('.children').slideToggle(); }); Commented el 11 jul. 2016 a las 17:59
  • @EdgarArmandHerreraPepe ahora comprendo mejor tu pregunta. La respuesta que dí está ligada específicamente al problema que expones y no al problema más general que tienes. Dejaré otra respuesta con una posible solución Commented el 12 jul. 2016 a las 13:52
0

Angular (y los frameworks/librerías en general) está pensado para que durante el desarrollo necesites reescribir la menor cantidad de código, y te centres mejor en la planificación e implementación de la lógica del negocio. Es por esto que angular nos da la opción de utilizar componentes, que no son más que abstracciones de código que puedes reutilizar una y otra vez. Lo importante de estos, es que mantienen un scope interno, el cual no es compartido con el resto de los controllers, por lo que puedes tener 10 menús y cada uno tendría su propio estado interno (abierto/cerrado, por ejemplo).

Te dejo un ejemplo simple:

var menuController = function(){
  var ctrl = this;
  
  ctrl.opened = false;

  ctrl.toggle = function(){
    ctrl.opened = !ctrl.opened;
  };
};


angular
.module('directiveApp', [])
.controller('controllerApp', ['$scope', function($scope) {
  $scope.menus = [
    {name: 'menu 1'},
    {name: 'menu 2'},
    {name: 'menu 3'},
    {name: 'menu 4'},    
  ];
}])
.component('menuComponent', {
  template: "<p class='menu' ng-click='$ctrl.toggle()'>{{$ctrl.name}}</p><ul ng-show='$ctrl.opened'><li>submenu</li></ul>",
  controller: menuController,
  bindings: {
    name: '<'
  }
});
  
.menu {
  display:inline-block;
  padding:10px;
  border:1px solid red;
  overflow:hidden;
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>


<div ng-app="directiveApp">
  <div ng-controller="controllerApp">
    <p>Menus</p>
    
    <menu-component ng-repeat="menu in menus" name="menu.name" />

  </div>
</div>

Esta es respuesta al problema general del usuario y no al código escrito por él

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.