Changing a checkbox to a switch style button
Changing a checkbox to a switch style button
I'm trying to change my checkbox to a switch style. The checkbox is rendered with ng-repeat. The problem is, when I click on any of the switch-style checkboxes, only the top one changes.
ng-repeat
What's going wrong?
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
2 Answers
2
You're creating multiple checkboxes with the same id.
Try this:
<tr ng-repeat="(i,x) in records">
<td>x</td>
<td>
<input type="checkbox" id="switchi" />
<label for="switchi"></label>
</td>
</tr>
You haven't bound your repeated checkbox inputs to any model.
Furthermore, you're re-using the same id value.
id
Consider extending your records model to also include the active state of the checkboxes.
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.
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
