CODEWITHSUNDEEP
angularjstwitter-bootstrap
Joel
Joel

Reputation: 193

checkbox ng-repeat format in columns

I want to be able to align multiple checkboxes in columns where the checkboxes are created from a ng-repeat.

enter image description here here is a plunker with example code but does not do what I want. Ideally I would like a variable to be used for the number of columns

here is a StackOverflow Example example without the ng-repeat

sample code

  $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

  // selected value is {id:2, name:"2 Mile"}
  $scope.selectedRadius = $scope.radii[3];

});


  <label class="checkbox" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
    <input type="checkbox" name="radius"
         ng-model="$parent.selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>

Upvotes: 1

Views: 1749

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

You can align using bootstrap! Check for the index and divide the row elements,

Here is the code,

HTML:

<div   ng-controller="GrokController"   class="container">
    <div ng-repeat="radius in radii" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4"><input type="checkbox"  
               ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>
        <div class="col-xs-4"><input type="checkbox"  
               ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>
        <div class="col-xs-4"><input type="checkbox"  
               ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>
    </div>
</div>

Controller:

app.controller('GrokController', ['$scope', function($scope) {
       $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

}]);

Working App

Upvotes: 1

Related Questions