AngularJS Directive to render an array of n elements as tables of m rows each

Question

Problem: Given an array of 'n' items I want them rendered in separate tables of m rows each. For example, if I have an array of n=30 items and m=6 then I need 5 tables of 6 items each appearing horizontally stacked together.

Attempted Solution: I tried using ng-repeat and ng-switch to render something to this effect but it didn't work. I am able to render these items as a single table (that's straight forward).

I know the code pasted below doesn't work as the first ng-switch doesn't close the and tags. Are there any generally known tricks to achieve something like this?

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: '='
        }
    };
});

Here is the code as an HTML 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">

Could you do html template please, as it's completely not readable — Eugene P., Feb 13 '14 at 16:57

score 3 · Accepted Answer · answered Feb 13 '14 at 23:14

This is way, I solved it:

directive:

<table ng-repeat='t in getIndexes(tableCount) track by $index'>
  <tbody>
    <tr ng-repeat='item in items' ng-if='isVisible($parent.$index,$index)'>
      <td>{{item.name}}</td>
      <td>{{item.city}}</td>
    </tr>
  </tbody>
</table>

getIndexes - function, which just creates array, because ng-repeat cannot just do simple repeat,only smart one.

isVisible - function, which defines visibility of the appropriate tr, based on position in source array.

directive code:

app.directive("tconstructor", function () {
    'use strict';

    return {
        restrict: 'AE',
        templateUrl: 'directive.html',
        scope: {
            items: '=',
            perTable: '=' // items per table
        },
        link: function ($scope, $element, attrs) {
              $scope.tableCount = $scope.items.length / $scope.perTable;
              $scope.getIndexes = function(count) {
                return new Array(count);
              },

              $scope.isVisible = function(t,i) {
                console.log(t,i,(t*$scope.perTable <= i), (i < (t+1)*$scope.perTable) );
                return (t*$scope.perTable <= i) && (i < (t+1)*$scope.perTable);
              }
        }

    };
});

index page:

 <div ng-controller="SimpleController">
  <tconstructor items='items' per-Table='perTable'></tconstructor>
 </div>

live code: I have set, items array to 8 elements, and per Table count = 2, as result 4 tables with 2 elems in each.

http://plnkr.co/edit/eUM7UJap3VIYvi0dMMbc?p=preview

there should be no issues, to adjust code and reach your goals. hope that helps

AngularJS Directive to render an array of n elements as tables of m rows each

1 Answers1