根据 AngularJS 和温泉 UI 中的开关显示不同的模式

Question

我正在尝试显示 2 种不同的模式，具体取决于用户选择的开关。

它是一个跨平台的应用程序，使用AngularJS，Onsen UI和Monaca。

我设置了如下开关：

<ul class="list">
    <li class="list__item">
        This is switch ONE
        <label class="switch switch--list-item">
            <input type="checkbox" class="switch__input" checked id="show-modal" onclick="modal.show('switchOneModal')">
            <div class="switch__toggle"></div>
        </label>
    </li>
    <li class="list__item">
        This is switch TWO
        <label class="switch switch--list-item">
            <input type="checkbox" class="switch__input" checked id="show-modal" onclick="modal.show('switchTwoModal')">
            <div class="switch__toggle"></div>
        </label>
    </li>
</ul>

然后在同一页面（页面上）上，我尝试显示任一模式，具体取决于切换的开关，如下所示。但是无论我单击哪个开关，我总是得到相同的模式？请问我哪里出错了？

<!-- Displays Modal ONE  -->
<ons-modal var="switchOneModal">
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog alert-dialog--android">
        <div class="alert-dialog-title alert-dialog-title--android">
            <div style="text-align: center">Further Details</div>
        </div>
        <div class="alert-dialog-content alert-dialog-content--android">
            <div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <p>You selected switch ONE</p>
            </div>
        </div>
    </div>
    <div class="alert-dialog-footer alert-dialog-footer--one">
        <button class="alert-dialog-button alert-dialog-button--one" ng-click="modal.hide()">Cancel</button>            
    </div>
</ons-modal>
<!-- Displays Modal TWO -->
<ons-modal var="switchTwoModal">
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog alert-dialog--android">
        <div class="alert-dialog-title alert-dialog-title--android">
            <div style="text-align: center">Further Details</div>
        </div>
        <div class="alert-dialog-content alert-dialog-content--android">
            <div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <p>You selected switch TWO</p>
            </div>
        </div>
    </div>
    <div class="alert-dialog-footer alert-dialog-footer--one">
        <button class="alert-dialog-button alert-dialog-button--one" ng-click="modal.hide()">Cancel</button>            
    </div>
</ons-modal>

Answer 1

为陷入同一问题的其他任何人回答自己的问题。

"想通了问题。这与显示模态的方法调用有关。它应该是