using ng-repeat-start to repeat multiple <td> element

Question

If you look at this plunk, http://plnkr.co/edit/evBFK07EAoJAkHLZSV2g?p=preview , you'll see the use of ng-repeat in index.html.

<table ng-controller="GadgetIconsCtrl" >
  <tr ng-repeat="widget in widgetSubset"  >
    <td>
      <div class="image-clicked" ng-click="widgetClick($event, widget)" 
           ng-class="{clicked: widget.clicked}">
        <img ng-src="{{widget.initImage}}" 
             title="{{widget.title}}" width="64" height="64">{{widget.title}}
      </div>
    </td>
  </tr>
</table>

It's working fine, however, I'd like to implement ng-repeat-start somehow in order to display two unique <td> elements per <tr> .

What it's currently doing is displaying one per as follows. Please click RUN SNIPPET below to see the ouput:

<table class="gadgetsTable">
  <tbody>
    <!-- ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="http://lorempixel.com/10/10/" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/column_stacked.png" title="Column Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/column_line.png" title="Column Line Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column Line Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="http://lorempixel.com/10/10/" title="Column 100% Stacked" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column 100% Stacked
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
  </tbody>
</table>

I want the output to look more like this, with three elements per :

<table class="gadgetsTable">
  <tbody>
    <!-- ngRepeat: gadget in gadgets.subset -->
    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/bar.png" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/column_stacked.png" title="Column Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column Chart
      </td>
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/bar.png" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->

    <tr ng-repeat="gadget in gadgets.subset" class="ng-scope">
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/bar.png" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/column_stacked.png" title="Column Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Column Chart
      </td>
      <td class="ng-binding">
        <!-- set clicked css class when image is clicked : ng-class="{'image-border': gadget.initImage===widget.initImage}" -->
        <div ng-class="{clicked: gadget.clicked}" class="clicked">
          <img ng-click="gadgets.selectChart(gadget)" ng-src="images2/bar.png" title="Bar Chart" width="64" height="64" src="http://lorempixel.com/10/10/">
        </div>
        Bar Chart
      </td>
    </tr>
    <!-- end ngRepeat: gadget in gadgets.subset -->
  </tbody>
</table>

How can I achieve this using ng-repeat-start ?

thanks, Bob

Answer 1

Easiest way is to get the data structure to be easier to bind into the view so you can get what you want with some nested ng-repeats.

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

    <tr ng-repeat="set in setOfSets">
      <td ng-repeat="widget in set">
        <div class="image-clicked" ng-click="widgetClick($event, widget)" ng-class="{clicked: widget.clicked}">
          <img ng-src="{{widget.initImage}}" title="{{widget.title}}" width="64" height="64" />
          {{widget.title}}
        </div>
      </td>
    </tr>

I used lodash to simplify redoing the grouping

  $scope.setOfSets = _.toArray(_.groupBy($scope.widgetSubset, function(item, index){
    return Math.floor(index/3)
  }))