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.
thanks
1 Answer
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>
width: 48%, and then give themfloat: left;.