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.