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);
  • \$\begingroup\$ How is a widget shown? \$\endgroup\$ – Anthony Jul 5 '16 at 22:12
  • \$\begingroup\$ @Tony A widget is shown by setting showX to true. Thanks! \$\endgroup\$ – catlovespurple Jul 5 '16 at 22:13
  • \$\begingroup\$ so you have ng-show based on the showshowX variables? \$\endgroup\$ – Anthony Jul 5 '16 at 22:14
  • \$\begingroup\$ @Tony. Yes. I do. \$\endgroup\$ – catlovespurple Jul 5 '16 at 22:15
  • \$\begingroup\$ 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.) \$\endgroup\$ – 200_success Jul 5 '16 at 22:30

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;
  • \$\begingroup\$ 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.. \$\endgroup\$ – catlovespurple Jul 5 '16 at 22:28
  • \$\begingroup\$ 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 \$\endgroup\$ – Anthony Jul 5 '16 at 22:32
  • \$\begingroup\$ 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 ? \$\endgroup\$ – catlovespurple Jul 5 '16 at 22:34
  • \$\begingroup\$ @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 \$\endgroup\$ – Anthony Jul 5 '16 at 22:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.