Angular controller to handle showing or hiding multiple widgets

Question

I have 7 variables controlling 7 widgets showing or hiding from the frontend. I want to put them together and control all of them using one function. Here is what I have. However, I feel like even though this way works, the code is really ugly and should have space for improvements.

$scope.showWidget = function(showA, showB, showC, showD, showE, showF, showG) {
 if (showA !== null) {
 $scope.showshowA = showA;
 }
 if (showB !== null) {
 $scope.showshowB = showB;
 }
 if (showC !== null) {
 $scope.showshowC = showC;
 }
 if (showD !== null) {
 $scope.showD = showD;
 }
 if (showE !== null) {
 $scope.showshowE = showE;
 }
 if (showF !== null) {
 $scope.showshowF = showF;
 }
 if (showG !== null) {
 $scope.showG = showG;
 }
 }

E.G. I will use the following code snippet for controlling showG variable on the fly.

 $scope.showWidget(null, null, null, null, null, null, true);

• Anthony: How is a widget shown?
• catlovespurple: @Tony A widget is shown by setting showX to true. Thanks!
• Anthony: so you have ng-show based on the showshowX variables?
• catlovespurple: @Tony. Yes. I do.
• 200_success: The code in your question is sketchy, to the point of being nearly hypothetical. A real working example would make this code more reviewable. (Press Ctrl-M in the question editor to make a live example.)

Answer 1

You could change your ng-show to use a function:

ng-show="isShown('widgetX')" ng-click="toggleWidget('widgetX')"

And then in your controller:

var widgets = {
 widgetA: {
 shown: true
 },
 widgetB: {
 shown: true
 },
 ...
};
$scope.isShown = function(widgetID) {
 return widgets[widgetID].shown;
}
$scope.toggleWidget = function(widgetID) {
 widgets[widgetID].shown = !widgets[widgetID].shown;
}

• catlovespurple: Thanks Tony first. The thing is actually a little bit different. Those variables(showA to showG) are not controlled by one ng-show. They have different ng-show(s) and are controlled by different buttons/input boxes separately..
• Anthony: Yeah I figured @catlovespurple - you would need to have an ng-show and ng-click for each widget with the appropriate ID ('widgetA' to 'widgetG') and have them in the $scope widgets object; or you could perhaps use ng-repeat with the populated widgets object to create your widgets
• catlovespurple: Ok, I think I get what you mean. In terms of if(newA!==null){a = newA;} do you have any suggestions on short-hand version ?
• Anthony: @catlovespurple this approach would negate the need for that bit of code as the controller is storing the shown state of each widget, and you are merely passing a (known) widget ID