Twitter Bootstrap Question posted in

Changing a checkbox to a switch style button-Twitter bootstrap

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.

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

Tags:

2

Answers


  1. 0

    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="switch{{i}}" />
        <label for="switch{{i}}"></label>
    </td>
</tr>
    Login or Signup to reply.
  2. 0

    You haven’t bound your repeated checkbox inputs to any model.

    Furthermore, you’re re-using the same id value.

    Consider extending your records model to also include the active state of the checkboxes.

    <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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search