AngularJSとOnsen UIの切り替えに応じて異なるモーダルを表示

Question

ユーザが選択するスイッチに応じて、2つの異なるモーダルを表示しようとしています。

AngularJS、Onsen UI、Monacaを使用するクロスプラットフォームアプリです。

私は以下のように設定するスイッチがあります（ONS-ページ）同じページに続いて

<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

同じ問題を抱えている他の人のために自分自身の質問に答える。

"これは、モーダルを表示するためのメソッド呼び出しと関係していましたが、onclick =" switchTwoModal.show（ 'modal'）」ではなくonclick = "modal.show（ ' switchTwoModal '） ""