将复选框更改为切换样式按钮
Posted
技术标签:
【中文标题】将复选框更改为切换样式按钮【英文标题】：Changing a checkbox to a switch style button 【发布时间】：2019-02-17 14:54:32 【问题描述】：我正在尝试将我的复选框更改为开关样式。该复选框以ng-repeat 呈现。问题是，当我点击任何开关样式的复选框时，只有顶部的复选框会发生变化。
怎么了？
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope)
$scope.records = [
"John Doe",
"Tom Jones",
"James Riley",
"Ted Mandy",
]
);input[type=checkbox]
height: 0;
width: 0;
visibility: hidden;
label
cursor: pointer;
text-indent: -9999px;
width: 60px;
height: 23px;
background: grey;
display: block;
border-radius: 100px;
position: relative;
label:after
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 18px;
height: 12px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
input:checked+label
background: #bada55;
input:checked+label:after
left: calc(100% - 5px);
transform: translateX(-100%);
label:active:after
width: 130px;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<th>Names</th>
<th>Tick</th>
</tr>
<tr ng-repeat="x in records">
<td>x</td>
<td> <input type="checkbox" id="switch" />
<label for="switch"></label></td>
</tr>
</table>
</body>View at w3schools.com
【问题讨论】：
【参考方案1】：您没有将重复的复选框输入绑定到任何模型。
此外，您正在重复使用相同的 id 值。
考虑扩展您的 records 模型，使其也包含复选框的活动状态。
<tr ng-repeat="record in records">
<td> record.name </td>
<td>
<input type="checkbox" id="switch $index ng-model="record.active" />
<label for="switch $index "></label>
</td>
</tr>
...
$scope.records = [
name: "John Doe", active: false ,
name: "Tom Jones", active: false ,
name: "James Riley", active: false ,
name: "Ted Mandy", active: false ,
];
Modified version of your example.
【讨论】：
【参考方案2】：您正在创建多个具有相同 ID 的复选框。 试试这个：
<tr ng-repeat="(i,x) in records">
<td>x</td>
<td>
<input type="checkbox" id="switchi" />
<label for="switchi"></label>
</td>
</tr>
【讨论】：
以上是关于将复选框更改为切换样式按钮的主要内容，如果未能解决你的问题，请参考以下文章