javascript 如何在离子开关中放置文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29280945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I place text inside an ion-toggle
提问by esastincy
Current I have a ion-toggle that looks like this
目前我有一个看起来像这样的离子开关
I want to do this
我想做这个
Is there anyway to make this happen? I read somewhere I could use ng-true-value and ng-false-value but that doesnt seem to do what I am looking for
有没有办法做到这一点？我在某处读到我可以使用 ng-true-value 和 ng-false-value 但这似乎并没有做我正在寻找的
回答by null
The attributes ng-true-valueand ng-false-valueare to provide the ng-modelexpression a certain custom value when the checkbox is checked. The ionicframework doesn't use it to display text in the toggle.
当复选框被选中时，属性ng-true-value和ng-false-value将为ng-model表达式提供特定的自定义值。该离子框架不使用它来显示切换文本。
But it is certainly possible :)
但这当然是可能的:)
Below is a directive that does. Slap ion-toggle-texton any existing ion-toggleand you're good to go. On/off text can be set with either the ng-true-value/ng-false-valueattributes or with a ;separated value with the ion-toggle-textattribute. If no text is provided it defaults to "on" & "off".
下面是一个指令。拍打ion-toggle-text任何现有的东西ion-toggle，你就可以开始了。开/关文本可以使用ng-true-value/ng-false-value属性或使用属性的;分隔值来设置ion-toggle-text。如果未提供文本，则默认为“ on”和“ off”。
<ion-toggle ion-toggle-text ng-model="simple">
Simple Example: <b>{{ simple || false }}</b>
</ion-toggle>
<ion-toggle ion-toggle-text="online;offline" ng-model="customText">
Custom text: <b>{{ customText || false }}</b>
</ion-toggle>
<ion-toggle ion-toggle-text ng-true-value="so true" ng-false-value="so false" ng-model="textByValue">
Text by value: <b>{{ textByValue || 'so false' }}</b>
</ion-toggle>
Plunker can be found here.
可以在此处找到 Plunker 。
Enjoy.
享受。
回答by CommonSenseCode
I also tried this without any success my nearest solution was placing a no/yes text at the left side of the toggle button like this:
我也尝试过，但没有成功，我最近的解决方案是在切换按钮的左侧放置一个 no/yes 文本，如下所示：
Link for code sample: http://play.ionic.io/app/f3ad6568b33c
代码示例链接：http: //play.ionic.io/app/f3ad6568b33c
The actual code: HTML:
实际代码：HTML：
<div class="toggle-wrapper">
<span class="toggle-question">Text question here?</span>
<ion-toggle class="meds-toggle"
toggle-class="toggle-energized"
ng-model="customText"
ng-checked="customText">
<div class="toggle-text">{{customText ? "YES" : "NO"}}</div>
</ion-toggle>
</div>
JS: //This is a var inside my controller $scope.customText = false;
JS: //这是我的控制器中的一个变量 $scope.customText = false;
CSS:
CSS：
#meds-refund-form .toggle-wrapper {
display: inline-block;
width: 100%;
margin-bottom: -20px;
}
.toggle-question {
font-size: $default-font-size -3;
float: left;
margin: 10px;
}
.toggle-text {
width: 10%;
color: $bright-yellow;
}
.meds-toggle {
margin: 10px;
width: 5%;
float: right;
border: none;
height: 50px;
}
回答by David says Reinstate Monica
Looking through the source code, this does not seem to be possible. Of note is that there are no options for sticking text in the toggle button, and the only transclude tag does not relate to the toggle button either. You can of course fork their code and do it yourself, but I dont think its worth it.
查看源代码，这似乎是不可能的。值得注意的是，切换按钮中没有粘贴文本的选项，唯一的嵌入标签也与切换按钮无关。你当然可以分叉他们的代码并自己做，但我认为这不值得。
回答by zebra1024
I updated the solution outlined in the answer to support Ionic 1.0.3. The Plunker can be found here
我更新了答案中概述的解决方案以支持 Ionic 1.0.3。Plunker 可以在这里找到
HTML Example below shows using ng-disabled property also.
下面的 HTML 示例也显示了使用 ng-disabled 属性。
<ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme">
Simple Example: <b>{{ simple || false }}</b>
</ion-toggle>
<ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme" ng-disabled="true">
Disabled Example: <b>{{ simple || false }}</b>
</ion-toggle>
<ion-toggle ion-toggle-text="online;offline" ng-model="customText" toggle-class="toggle-my-theme">
Custom text: <b>{{ customText || false }}</b>
</ion-toggle>
<ion-toggle ng-model="customText" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
