show/hide components

Question

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.

Answer 1

You can use Bracket Notation to have custom object key by ['text'+variable].

vm.showComponent = function(componentName)
{
   hideComponents();
   vm['show' + componentName]=true;
}