[英]how to add text on off inside the toggle switch with angular js
on off toggle switch is working with the ng-model data. on off 切换开关正在处理 ng-model 数据。 but how to show the on off status inside the toggle switch但是如何在拨动开关内显示开关状态
html html
{{pump1status_switch}}
<label class="switch">
<input type="checkbox" ng-model="pump1status.value1">
<span class="slider round"></span>
</label>
angular js code角度js代码
if ($scope.pump1status.trim() === "1") {
$scope.pump1status = "1";
$scope.pump1status_switch = "on";
$scope.pump1status = {
value1: true,
value2: 'YES'
};
}
else {
$scope.pump1status_switch = "off";
$scope.pump1status = "0";
$scope.pump1status = {
value1: false,
value2: 'NO'
};
}
Add another span element for the text and use ng-class
to give it an extra class if switch is off:为文本添加另一个 span 元素,如果开关关闭,则使用ng-class
为其提供一个额外的类:
<label class="switch">
<input type="checkbox" ng-model="vm.isActive">
<span class="slider round" >
<span ng-class="{ 'off': !vm.isActive }">{{vm.isActive ? 'on' : 'off'}}</span>
</span>
</label>
Then you will need some css to move the off
text:然后你需要一些 css 来移动off
文本:
.slider.round {
border-radius: 34px;
padding: 7px;
}
.off {
margin-left:26px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.