在angularjs

时间:2015-09-09 09:46:15

标签: angularjs dynamic popupwindow

我有通过单击添加方案按钮动态创建的方案。最初将有1个场景,然后用户可以添加4个场景。最多可添加5个方案。每个场景都有一个计算器图标,点击它会显示一个计算器弹出窗口。

如果用户在特定场景中单击计算器图标,则应仅显示特定场景的计算器弹出窗口;如果用户单击关闭,则应关闭弹出窗口。

我正在scenarios.IdshowCalculatorPopup(scenarios.Id)以及情景中传递CloseCalculatorPopup(scenarios.Id)。我正在尝试打开和关闭特定情景的弹出窗口。

我的问题是,如果我在方案1中单击计算器图标,则会在所有方案中打开弹出窗口。我尝试使用eval(), window[]无济于事。

更新了代码。

而不是我正在使用

的Switch Case
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;
    }
}

1 个答案:

答案 0 :(得分:0)

你可以传递$ index而不是scenario.Id。最后,您需要在switch语句中添加break语句

<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script>

<table id="example" class="display" width="100%">
    <tfoot><tr></tr></tfoot>
</table>

break会停止对switch语句的评估。