In the code snippet below, I am generating multiple checkboxes from a list and arranging them into three columns using ng-if="$index % 3 == 0".
<div ng-controller="TestController" class="container">
<div ng-repeat="item in items" ng-if="$index % 3 == 0" class="row">
<div class="col-xs-4">
<input type="checkbox" ng-model="items[$index].id">
<span>{{items[$index].name}}</span>
</div>
<div class="col-xs-4">
<input type="checkbox" ng-model="items[$index+1].id">
<span>{{items[$index+1].name}}</span>
</div>
<div class="col-xs-4">
<input type="checkbox" ng-model="items[$index+2].id">
<span>{{items[$index+2].name}}</span>
</div>
</div>
</div>
var app = angular.module('app', [ ]);
app.controller('TestController', ['$scope', function($scope) {
$scope.items = [
{id:0, name:"1/4 Mile"},
{id:1, name:"1/2 Mile"},
{id:2, name:"1 Mile"},
{id:3, name:"2 Mile"},
{id:4, name:"3 Mile"},
{id:5, name:"4 Mile"},
{id:6, name:"5 Mile"}
];
}]);
An issue arises when the number of items in the list is odd, resulting in extra undefined checkboxes. How can this be resolved?