离子选择切换问题
Posted
技术标签:
【中文标题】离子选择切换问题【英文标题】：Ionic selected toggle issue 【发布时间】：2016-09-26 06:45:12 【问题描述】：我的 ionic 应用有问题。
如您所见，我的第二个切换按钮看起来与第一个不同。我尝试了很多不同的 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
【问题讨论】：
检查 $scope.emailNotification 是否有一些价值..in it..in controller！ 【参考方案1】：我做了一个 sn-p，一切都按预期工作。一定有别的东西。您发布的代码有效。
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>【讨论】：
【参考方案2】：感谢您的回答。从切换中删除解决了我的问题。第二个切换按钮现在看起来很正常。
【讨论】：
以上是关于离子选择切换问题的主要内容，如果未能解决你的问题，请参考以下文章