Want 6 radio buttons in two line with 3 in each line

Question

I have 6 radio buttons. I want 3 on one line and other 3 on another line. I am using ng-repeat for retrieving radio button data from json. I tried putting ng-if for placing it for even and odd but its not working and also used two different div tags bt still not getting. Can anyone help me with this

Answer 1

here is a list which can be used also directly in the code. In fact this list can have the radio values.

 $scope.list = [0,1,2,3,4,5]; 

here is the html code :

<div ng-init="list=[0,1,2,3,4,5];">
    <div ng-repeat="radio_id in list" ng-if="$index % 3 == 0" class="row">
          <div class="col-xs-4" ng-repeat="radio_id in list.slice($index, ($index+3 > list.length ? list.length : $index+3))">
             Radio {{radio_id}}  <input type="radio" name="radio_id" value="radio_id">
          </div>
      </div>
</div>

Answer 2

You can use class col-sm-3 on ng-repeat div under row div. If you are using bootstrap.

<div class="row">
                    <div class="col-sm-12">                                                                                   
                        <div ng-repeat="a in list" name="chk" class="col-sm-3">
                            <md-checkbox ng-model="modelName">
                                <span> {{ room.Name }}</span>
                            </md-checkbox>
                        </div>                             
                    </div>
                </div>