AngularJS ng-repeat double td

Question

I've looked around and was able to find similar questions to mine but not the same. This might be a realy noobie question but I have no idea how to do this. I'm using ng-repeat to show 4 checkboxes like so:

<tr ng-repeat="type in dataType">
  <td><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
</tr>

This gives me 4 checkboxes in one row. But what i would like is for the first two checkboxes to be side by side. So 2x td inside one tr. However when i change the code to

<tr ng-repeat="type in dataType">
  <td><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
  <td><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
</tr>

It just multiplies the checkboxes and i end up with 2 rows and 8 checkboxes. So how do i get ng-repeat to change checkbox 2 into the next iteration of type?

Answer 1

You can always restructure the variables, for example:

$scope.rows = [ [dataType[0], dataType[1]], [dataType[2], dataType[3]] ];

And then:

<tr ng-repeat="type in rows">
  <td><checkbox ng-model="type[0].checked"></checkbox> {{type[0].name}}</td>
  <td><checkbox ng-model="type[1].checked"></checkbox> {{type[1].name}}</td>
</tr>

Answer 2

While this is not a perfect solution, it should do the trick:

<tr ng-repeat="type in dataType" ng-if="$index <= 1">
  <td><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
  <td><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
</tr>

<tr ng-repeat="type in dataType" ng-if="$index > 1">
  <td><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
  <td><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
</tr>

I'm researching whether or not it can be done with ng-repeat-start and ng-repeat-end.

As mentioned by Alejandro, another solution is this:

<tr>
  <td><checkbox ng-model="dataType[0].checked"></checkbox> {{dataType[0].name}}</td>
  <td><checkbox ng-model="dataType[1].checked"></checkbox> {{dataType[1].name}}</td>
</tr>

<tr>
  <td><checkbox ng-model="dataType[2].checked"></checkbox> {{dataType[2].name}}</td>
  <td><checkbox ng-model="dataType[3].checked"></checkbox> {{dataType[3].name}}</td>
</tr>

Answer 3

Try this:

<tr ng-repeat="_ in dataType" ng-if="$even">
    <td ng-repeat="type in dataType.slice($parent.$index, $parent.$index + 2)"><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
</tr>