Ionic selected toggle issue

私のイオンアプリに問題があります。Ionic selected toggle issue

私の2番目のトグルボタンは、最初のものとは異なって見えます。私はそれを修正するためにhtmlの非常に多くの異なる変種を試しました。しかし、私は解決策を見つけることができません。そして、アイコンは腐って見えません。 ionic app screenshot

HTML：：

<ion-view> 
    <ion-content class="padding"> 
     <div class="list"> 
      <form ...> 
       <!-- ... --> 
       <div class="card"> 

        <div class="item item-divider"> 
         Zugangsdaten 
        </div> 

        <div class="item item-text-wrap"> 
         <label class="item item-input"> 
          <i class="icon ion-ios-people"></i> 
          <span class="input-label">Klasse</span> 
          <input required type="text" ng-model="username" 
            placeholder="Beispiel: R1a"> 
         </label> 
        </div> 

        <div class="item item-text-wrap"> 
         <label class="item item-input"> 
          <i class="icon ion-key"></i> 
          <span class="input-label">Passwort</span> 
          <input required type="password" ng-model="password" 
            placeholder="Frage deine/n Lehrer/in nach dem Passwort."> 
         </label> 
        </div> 
       </div> 

       <div class="card"> 

        <div class="item item-divider"> 
         Benachrichtigungen 
        </div> 

        <div class="item"> 
         <ion-toggle ng-model="pushNotification" toggle-class="calm"><i 
           class="icon ion-android-notifications"></i> 
          Push-Benachrichtung 
         </ion-toggle> 
        </div> 

        <div class="item"> 
         <ion-toggle ng-model="emailNotification" toggle-class="calm"><i class="icon ion-email"></i> 
          E-Mail-Benachrichtung 
         </ion-toggle> 
        </div> 
       </div> 

       <!-- buttons --> 

      </form> 
     </div> 
    </ion-content> 
</ion-view>

イオンのバージョン：1.7.15

ありがとうここ

はスクリーンショットです！

出典

2016-05-27 Jo Jay

$ scope.emailNotificationに何らかの値があるかどうかを確認します。 –

私はスニペットを作成し、すべてが期待どおりにwokrしました。他に何かがあるはずです。投稿されたコードが機能します。あなたの答えを

var app = angular.module("myApp",['ionic']); 
 
app.controller("myCtrl", function($scope){ 
 
    $scope.pushNotification = true; 
 
    $scope.emailNotification = false; 
 
    });

<head> 
 
     <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.3.1/css/ionic.css"> 
 
     <script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script> 
 
    </head> 
 
    <body ng-app="myApp" ng-controller="myCtrl"> 
 
    <ion-view> 
 
     <ion-content class="padding"> 
 
      <div class="list"> 
 
       <form ...> 
 
        <!-- ... --> 
 
        <div class="card"> 
 

 
         <div class="item item-divider"> 
 
          Zugangsdaten 
 
         </div> 
 

 
         <div class="item item-text-wrap"> 
 
          <label class="item item-input"> 
 
           <i class="icon ion-ios-people"></i> 
 
           <span class="input-label">Klasse</span> 
 
           <input required type="text" ng-model="username" 
 
             placeholder="Beispiel: R1a"> 
 
          </label> 
 
         </div> 
 

 
         <div class="item item-text-wrap"> 
 
          <label class="item item-input"> 
 
           <i class="icon ion-key"></i> 
 
           <span class="input-label">Passwort</span> 
 
           <input required type="password" ng-model="password" 
 
             placeholder="Frage deine/n Lehrer/in nach dem Passwort."> 
 
          </label> 
 
         </div> 
 
        </div> 
 

 
        <div class="card"> 
 

 
         <div class="item item-divider"> 
 
          Benachrichtigungen 
 
         </div> 
 

 
         <div class="item"> 
 
          <ion-toggle ng-model="pushNotification" toggle-class="calm"><i 
 
            class="icon ion-android-notifications"></i> 
 
           Push-Benachrichtung 
 
          </ion-toggle> 
 
         </div> 
 

 
         <div class="item"> 
 
          <ion-toggle ng-model="emailNotification" toggle-class="calm"><i class="icon ion-email"></i> 
 
           E-Mail-Benachrichtung 
 
          </ion-toggle> 
 
         </div> 
 
        </div> 
 

 
        <!-- buttons --> 
 

 
       </form> 
 
      </div> 
 
     </ion-content> 
 
    </ion-view> 
 
    </body>

出典

2016-05-28 06:06:33

感謝。トグルからの取り外しは私の問題を解決しました。 2番目のトグルボタンは正常に見えます。

出典

2016-05-30 20:43:55

答えて

関連する問題