根据 AngularJS 和 Onsen UI 中的开关显示不同的模式答案

【问题标题】：Displaying different modals depending on switch in AngularJS and Onsen UI根据 AngularJS 和 Onsen UI 中的开关显示不同的模式
【发布时间】：2016-04-28 08:55:43
【问题描述】：

我正在尝试根据用户选择的开关显示 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>

然后在同一页面 (ons-page) 我尝试显示任一模式，具体取决于如下切换的开关。但是无论我点击哪个开关，我总是得到相同的模式？请问我哪里错了？

<!-- 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>

【问题讨论】：

从表面上看，问题很可能出在函数modal.show 上。如果您提供，我们将更容易为您提供帮助。
另一件事是 - 你的两个开关都有相同的 id - 这不太可能，但理论上这不是不可能的原因。（如果有一些奇怪的标签逻辑通过 ids 或类似的东西获取输入）。总的来说，即使没有任何问题，您也希望避免这种情况:)
解决了这个问题。这与显示模态的方法调用有关。它应该是 onclick="switchTwoModal.show('modal')" 而不是 onclick="modal.show('switchTwoModal')"
我很高兴问题解决了:)

标签： arrays angularjs json onsen-ui monaca

【解决方案1】：

为遇到相同问题的其他人回答自己的问题。

“解决了这个问题。它与显示模式的方法调用有关。它应该是 onclick="switchTwoModal.show('modal')" 而不是 onclick="modal.show( 'switchTwoModal')""

【讨论】：