Challenge: I have an array of 'n' items that I need to display in separate tables, with each table containing m rows. For instance, if n=30 and m=6, then I should have 5 tables each with 6 items displayed horizontally.
Proposed Solution: I attempted to use ng-repeat and ng-switch to achieve this layout, but encountered issues. While I can easily render the items in a single table, splitting them into multiple tables as described has proven tricky.
I am aware that the code snippet provided below is incorrect due to the unclosed ng-switch tags. Are there any common approaches or tricks to accomplish this kind of layout?
itemapp.directive("items", function () {
'use strict';
return {
restrict: 'E',
template: '<div id="itemDiv" ng-repeat="item in items" ng-show="$index==0">' +
'<span ng-switch on="$index % 10">' +
' <div ng-switch-when="0">' +
' <table><tbody>'+
' </div>'+
'<tr class="itemon">' +
'<td><input type="radio" ng-model="item.on" value="0" >OFF</input></td>' +
'<td>{{$index}}</td>'+
'</tr>' +
' <div ng-switch-when="9">' +
' </table></tbody>'+
' </div>'+
'</span>' +
'</div ng-show="$index==0">',
link: function (scope) {
},
scope: {
items: '='
}
};
});
Below is the HTML Template version of the code:
<div id="itemDiv" ng-repeat="item in items" ng-show="$index==0">
<span ng-switch on="$index % 10">
<div ng-switch-when="0">
<table>
<tbody>
</div>
<tr class="itemon">
<td><input type="radio" ng-model="item.on" value="0">OFF</input></td>
<td>{{$index}}</td>
</tr>
<div ng-switch-when="9">
</table></tbody>
</div>
</span>
</div ng-show="$index==0">