One challenge I am facing is how to manage a menu with multiple buttons that open submenus without using a massive switch statement in my code. Instead, I want to try something different:
In the HTML file, I call the function toggleVis and pass the name of the element to be toggled as a parameter:
<ul class="sidebar-bottom-list" ng-controller="MenuController">
<li>
<a href="#/dossier" ng-click="toggleVis(showSubmenuDos); go('/dossier')" ng-class="class" class="sidemenuItem"><span class="glyphicon glyphicon-folder-open"> </span>Dossiers</a>
<div class="list-group narrow-list-group no-padding-bottom slider-top-bottom" ng-show="showSubmenuDos" ng-class="active">
<a href="#" class="list-group-item" ng-class="dosMenuItems(0)">lijst</a>
<a href="#" class="list-group-item" ng-class="dosMenuItems(1)">algemeen</a>
<a href="#" class="list-group-item" ng-class="dosMenuItems(2)">partijen</a>
<a href="#" class="list-group-item" ng-class="dosMenuItems(3)">documenten</a>
<a href="#" class="list-group-item" ng-class="dosMenuItems(4)">notas</a>
<a href="#" class="list-group-item" ng-class="dosMenuItems(5)">royementen</a>
<a href="#" class="list-group-item" ng-class="dosMenuItems(6)">urenregistratie</a>
<a href="#" class="list-group-item" ng-class="dosMenuItems(7)">voortgang</a>
</div>
</li>
<!-- imagine more menu items like this one -->
Next, in my main.js file, I have defined the toggleVis function as follows:
app.controller('MenuController', function($scope, $location) {
//can be triggered by ng-click="go('/path')"
$scope.go = function(path) {
$location.path(path);
};
//toggle visibility
$scope.toggleVis = function(param) {
//$scope.{param} = !$scope.{param}
alert(param)
$scope.param = !$scope.param;
//param.ngShow = !param.ngShow;
//$scope.this = !$scope.this;
}
});
I have attempted different approaches but nothing seems to work.
Is there a better way to achieve what I need, or perhaps an improved solution?
I would appreciate a detailed explanation in your response.