Question

我的离子应用程序中存在问题。

你怎么看，我的第二个切换按钮看起来与第一个切换按钮不同。我尝试了很多不同的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

Answer 1

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

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>

Answer 2

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

离子选择切换问题

2 个答案: