0
\$\begingroup\$

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

1 Answer 1

1
\$\begingroup\$

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;
}
\$\endgroup\$
4
  • \$\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\$ Jul 5, 2016 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, 2016 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\$ Jul 5, 2016 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, 2016 at 22:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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