Anzeigen verschiedener Modalitäten je nach Einschaltung in AngularJS und Onsen UI

Question

Ich versuche, zwei verschiedene Modalitäten anzuzeigen, je nachdem, welchen Schalter ein Benutzer auswählt.

Es ist eine Cross-Plattform-App, die AngularJS, Onsen UI und Monaca verwendet.

Ich habe die Schalter wie im Folgenden beschrieben:

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

dann auf der gleichen Seite (ons-Seite) Ich versuche, entweder modal angezeigt werden abhängig davon, welcher Schalter wurde wie unten umgeschaltet. Aber ich bekomme immer das gleiche modale zurück, egal welchen Schalter ich klicke? Wo mache ich das bitte falsch?

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

Beantworten der eigenen Frage für jemand anderen stecken auf dem gleichen Problem.

"Das Problem herausgefunden. Es war mit dem Methodenaufruf zu tun, um das modale zu zeigen. Es hätte onclick =" switchTwoModal.show ('modal') "und nicht onclick =" modal.show (' switchTwoModal ') ""