Bootstrap-Swit

by Reddy Uppathi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">

  <table class="table">
    <thead>
      <tr>
        <th class="col-md-2 col-xs-4">Characteristic</th>
        <th class="col-md-2 col-xs-4">Description</th>
        <th class="col-md-2 col-xs-4">Count of Values</th>
        <th class="col-md-2 col-xs-4">Show by Default</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in names.data">
        <td class="col-md-2 col-xs-4">{{ x.characteristic }}</td>
        <td class="col-md-2 col-xs-4">{{ x.description }}</td>
        <td class="col-md-2 col-xs-4">{{ x.attrCount }}</td>
        <td class="col-md-2 col-xs-4">
          <div class="material-switch pull-right">
            <input id="{{$index }}" name="someSwitchOption001" type="checkbox" />
            <label for="{{$index }}" class="label-success"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

</div>

CSS

.material-switch>input[type="checkbox"] {
  display: none;
}

.material-switch>label {
  cursor: pointer;
  height: 0px;
  position: relative;
  width: 40px;
}

.material-switch>label::before {
  background: rgb(0, 0, 0);
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  position: absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px;
}

.material-switch>label::after {
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px;
}

.material-switch>input[type="checkbox"]:checked+label::before {
  background: inherit;
  opacity: 0.5;
}

.material-switch>input[type="checkbox"]:checked+label::after {
  background: inherit;
  left: 20px;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.names = {
    "data": [{
        "characteristic": "Dept",
        "description": "Retailer Dept",
        "attrCount": "1",
        "showDefault": "false"
      },
      {
        "characteristic": "Category",
        "description": "Category in Dept",
        "attrCount": "5",
        "showDefault": "true"
      },
      {


        "characteristic": "Sub Category",
        "description": "Sub Category in Category",
        "attrCount": "2000+",
        "showDefault": "false"
      },
      {
        "characteristic": "Brand",
        "description": "Product Brand",
        "attrCount": "35",
        "showDefault": "false"
      }
    ]
  }
  console.log($scope.names)
  //$scope.finalName = $scope.names.data;
  //console.log($scope.finalName)
});