离子选择切换问题

我的离子应用程序有问题。

你怎么看，我的第二个切换按钮看起来与第一个不同。我尝试了许多不同的 html 变体来修复它。但我找不到解决方案。而且图标看起来没有直觉。

这是屏幕截图：离子应用截图

.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

谢谢你的回答。从切换开关中删除解决了我的问题。第二个切换按钮现在看起来很正常。

我做了一个片段，一切都按预期工作。一定还有别的东西。您发布的代码有效。

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>

相关内容

最新更新

热门标签：