在angularjs中顯示並關閉動態創建的對話框

我有通過單擊添加場景按鈕動態創建的場景。最初1個場景將在那裏，然後用戶可以添加4個場景。最多可以添加5個場景。每個場景都有一個計算器圖標，通過點擊它，它會顯示一個計算器彈出窗口。在angularjs中顯示並關閉動態創建的對話框

如果用戶點擊特定場景的計算器圖標，它應該只顯示特定場景的計算器彈出窗口;如果用戶點擊關閉，它應該關閉彈出窗口。

我正在通過scenarios.Id在showCalculatorPopup(scenarios.Id)和CloseCalculatorPopup(scenarios.Id)並與scenario.Id我試圖打開和關閉特定場景的彈出窗口。

我的問題是，如果我點擊場景1中的計算器圖標，彈出窗口在所有場景下都打開。我嘗試使用eval(), window[]無濟於事。

更新了代碼。

替代交換機案例我使用

vm.showCalculatorPopup = function (ScenarioId) { 
    vm['calculatorPopup' + ScenarioId] = true; 
}

新增break;。即使在增加休息之後，它仍然無法正常工作。當我在場景1中第一次打開和關閉計算器時，它的工作正常。但是當我添加方案2並單擊計算器圖標時，它顯示彈出窗口，當我在方案1中單擊關閉時彈出它關閉方案2彈出窗口。

無法使用索引，因爲按鈕位於Licenceplates及其內部Sections及其內部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>

最新角控制器

vm.showCalculatorPopup = function (ScenarioId) { 
     vm['calculatorPopup' + ScenarioId] = true; 
} 

vm.showCalculatorPopup = function (ScenarioId) { 
     vm['calculatorPopup' + ScenarioId] = false; 
}

前角控制器

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; 
    } 
}

來源

2015-09-09 Lakshmana Kumar

我會建議在這種情況下創建指令 –

你switch案件從來沒有打破，所以你每次執行後的情況。

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; 
    }

您與其他swtich有同樣的問題。 More info on this。

來源

2015-09-09 09:53:26

謝謝。我可以使用vm.eval（'calculatorPopup'+ ScenarioId）= true;喜歡這個？ –

這應該做到這一點：vm ['calculatorPopup'+ ScenarioId] = true; –

你可以通過$索引而不是scenario.Id。最後你需要在你的switch語句中添加一個break語句

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停止評估你的switch語句。

來源

2015-09-09 09:57:39

謝謝。我可以使用vm.eval（'calculatorPopup'+ ScenarioId）= true;喜歡這個？ –

idk，如果現在有效，你可以添加一個jsfiddle嗎？ –

在angularjs中顯示並關閉動態創建的對話框

回答

相關問題