CODEWITHSUNDEEP
cssangularjscheckbox
sia
sia

Reputation: 1910

how to group the checkbox in container using angular js

I'm really not sure how to group the checkbox in angular js which gives looks as shown in the reference image attached here. I'm able to only show list of checkbox but not as shown below.

enter image description here

thanks

Upvotes: 0

Views: 96

Answers (1)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

If you are generating them with ng-repeat you can try to use ng-class-odd to display different style for your checkboxes. You should be looking into CSS, but I gave my attempt at it with this example:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.checkboxes = [
    {"name":"Dehi","value":false},
    {"name":"Kolkata","value":false},
    {"name":"Munbai","value":false},
    {"name":"Pune","value":false},
    {"name":"Chennai","value":false},
    {"name":"Kochi","value":false}
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
  .column {
    float: left;
    width: 50%;
  }
  .row {
    width: 200px;
    background-color: #DDD;
  }
</style>

<div ng-app="myApp" ng-controller="myCtrl">

  <div class="row">
    <div ng-repeat="x in checkboxes" ng-class-odd="'column'">
      <input type="checkbox" ng-model="x.value">{{x.name}}
    </div>
  </div>

</div>

Upvotes: 1

Related Questions