# show/hide components

The following code is used to show/hide components in an AngularJS app:

var vm = this;

var hideComponents = function()
{
vm.showRegions = false;
vm.showAccounts = false;
vm.showOrders = false;
vm.showInvoices = false;
vm.showWarehouses = false;
}

vm.showComponent = function(componentName)
{
hideComponents();
switch (componentName) {
case "Regions":
vm.showRegions = true;
break;
case "Accounts":
vm.showAccounts = true;
break;
case "Orders":
vm.showOrders = true;
break;
case "Invoices":
vm.showInvoices = true;
break;
case "Warehouses":
vm.showWarehouses = true;
break;
default:
}
}


Is there a more concise way to achieve this functionality?

I was thinking something along these lines:

var setComponentVisibility = function (componentName = null)
{
var bool = false;
var map = {
'Regions': vm.showRegions = bool,
'Accounts': vm.showAccounts = bool,
'Orders': vm.showOrders = bool,
'Invoices': vm.showInvoices = bool,
'Warehouses': vm.showWarehouses = bool
}
if (componentName != null)
{
// code to set bool to true only for that componentName in map
// is this even possible?
// if so, how?
}
}


However, being new to AngularJS, I'm not sure the above is possible.

You can use Bracket Notation to have custom object key by ['text'+variable].
vm.showComponent = function(componentName)

• Answers with just code and without some explanation are not good answers. And as the code you have given is sloppy (no spaces between operators and missing a ;) I am down voting your answer. Aug 24 '18 at 5:35