Show and close dynamically created dialog in angularjs - angularjs

Question

I have scenarios which are created dynamically by clicking Add Scenario button. Initially 1 scenario will be there and then user can add 4 scenarios. Maximum 5 scenarios can be added. Each scenario has a calculator icon and by clicking it, it will show a calculator popup.
If user clicks calculator icon on a particular scenario, it should show only particular scenario's calculator popup; and if user clicks close, it should close the popup.
I'm passing scenarios.Id in showCalculatorPopup(scenarios.Id) and CloseCalculatorPopup(scenarios.Id) and with scenarios.Id i'm trying to open and close particular scenario's popup.
My issue is if I click a calculator icon in scenario 1, popup is being opened in all scenarios. I tried using eval(), window[] to no avail.
Updated the code.
Instead of Switch Case i'm using
vm.showCalculatorPopup = function (ScenarioId) {
vm['calculatorPopup' + ScenarioId] = true;
}
Added break;. Even after adding break it's not working properly. When i open and close calculator for 1st time in scenario 1 then its working fine.
But when i add scenario 2 and click calculator icon, its shows the popup and when i click close in scenario 1 popup it close the scenario 2 popup.
Can't use index because button is inside the Licenceplates and its inside the Sections and its inside the Scenarios.
<div data-ng-app="ang" data-ng-controller="InputController as input">
<div data-ng-repeat="scenarios in input.model.Scenarios"> <!-- Scenario Id = 1, 2, 3, 4, 5 -->
<div data-ng-repeat="sections in scenarios.Sections">
<div data-ng-repeat="licensePlates in sections.LicensePlates">
<button data-ng-click="input.showCalculatorPopup(scenarios.Id)">Calculate</button>
<div data-ng-show="input.calculatorPopup{{scenarios.Id}}">
Dialog Box
<button data-ng-click="input.CloseCalculatorPopup(scenarios.Id)"></button>
</div>
</div>
</div>
</div>
</div>
Latest Angular Controller
vm.showCalculatorPopup = function (ScenarioId) {
vm['calculatorPopup' + ScenarioId] = true;
}
vm.showCalculatorPopup = function (ScenarioId) {
vm['calculatorPopup' + ScenarioId] = false;
}
Previous Angular Controller
vm.showCalculatorPopup = function (ScenarioId) {
vm.eval('calculatorPopup' + ScenarioId) = true;
// or
vm.window['calculatorPopup' + ScenarioId] = true;
vm.calculatorPopup1 = true; // working
// or
switch (ScenarioId) {
case 1:
vm.calculatorPopup1 = true;
break;
case 2:
vm.calculatorPopup2 = true;
break;
case 3:
vm.calculatorPopup3 = true;
break;
case 4:
vm.calculatorPopup4 = true;
break;
case 5:
vm.calculatorPopup5 = true;
break;
}
}
vm.CloseCalculatorPopup = function (ScenarioId) {
switch (ScenarioId) {
case 1:
vm.calculatorPopup1 = false;
break;
//case 3 ,4
case 5:
vm.calculatorPopup2 = false;
break;
}
}

Answer 1

Your switch cases are never breaking, so you are executing every later case.
switch (ScenarioId) {
case 1:
vm.calculatorPopup1 = true;
break;
case 2:
vm.calculatorPopup2 = true;
break;
case 3:
vm.calculatorPopup3 = true;
break;
case 4:
vm.calculatorPopup4 = true;
break;
case 5:
vm.calculatorPopup5 = true;
break;
}
You have the same problem with the other swtich. More info on this.

Answer 2

you could pass $index instead of scenarios.Id. finally you need to add a break statement in your switch statements
switch (ScenarioId) {
case 1:
vm.calculatorPopup1 = true;
break;
case 2:
vm.calculatorPopup2 = true;
break;
case 3:
vm.calculatorPopup3 = true;
break;
case 4:
vm.calculatorPopup4 = true;
break;
case 5:
vm.calculatorPopup5 = true;
break;
}
}
vm.CloseCalculatorPopup = function (ScenarioId) {
switch (ScenarioId) {
case 1:
vm.calculatorPopup1 = false;
break;
case 2:
vm.calculatorPopup2 = false;
break;
}
}
break stops the evaluation of your switch statement.