Need help with ng-repeat

Apps & Services HABPanel
1

I’m searching around but haven’t figured it out yet.

I’m trying to create a custom widget that will list all of my lights in 1 Widget/Table with 3 lights in each row.

I think the below is semi correct and gives me 3 columns with the index number. But I cant’t figure out how to get the Item Label or other yet. When I do change to use the item.label, it just repeats the same ones 3 times?

<div ng-repeat="item in itemsInGroup('Lights')" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{$index}}</div>
  	<div class="col-xs-4">{{$index + 1}}</div>
  	<div class="col-xs-4">{{$index + 2}}</div>
</div>
2

I think have this working close to as it should if anyone can possibly help in fine tuning it. I think I need to something with start and end on the repeat? The last row is showing 6 lights when should only the 2 remaining.

The goal here was to loop all items in my Lights group, And maybe this can be done better/cleaner as seems I still need to create each ‘row’ separately.

But here is what it looks like currently.

And the code

<table style="width: 100%;">
	<tr>
		<td colspan=10 style="padding: 0px; padding-top: 10px;"><h3 style="color: #ffaa00; line-height: .1em;">Lighting Control</h3></td>
	</tr>
	<tr>
		<td>
	   
<div ng-repeat="item in itemsInGroup('Lights') track by $index" ng-if="$index % 6 == 0" class="row">
    <div class="col-xs-2">
	<table style="width: 100%;">
      <tr>
        <td style="padding: 0px; padding-top: 10px;">
          <div ng-init="model0={'name': itemsInGroup('Lights')[$index].label, 'item': itemsInGroup('Lights')[$index].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } ">
            <widget-switch   ng-model="model0" />
          </div>
        </td>
      </tr>
    </table> 
	</div>
	
	<div class="col-xs-2">
	<table style="width: 100%;">
      <tr>
        <td style="padding: 0px; padding-top: 10px;">
          <div ng-init="model1={'name': itemsInGroup('Lights')[$index+1].label, 'item': itemsInGroup('Lights')[$index+1].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } ">
            <widget-switch   ng-model="model1" />
          </div>
        </td>
      </tr>
    </table> 
	</div>
	
	<div class="col-xs-2">
	<table style="width: 100%;">
      <tr>
        <td style="padding: 0px; padding-top: 10px;">
          <div ng-init="model2={'name': itemsInGroup('Lights')[$index+2].label, 'item': itemsInGroup('Lights')[$index+2].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } ">
            <widget-switch   ng-model="model2" />
          </div>
        </td>
      </tr>
    </table> 
	</div>
	
	<div class="col-xs-2">
	<table style="width: 100%;">
      <tr>
        <td style="padding: 0px; padding-top: 10px;">
          <div ng-init="model3={'name': itemsInGroup('Lights')[$index+3].label, 'item': itemsInGroup('Lights')[$index+3].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } ">
            <widget-switch   ng-model="model3" />
          </div>
        </td>
      </tr>
    </table> 
	</div>
	
	<div class="col-xs-2">
	<table style="width: 100%;">
      <tr>
        <td style="padding: 0px; padding-top: 10px;">
          <div ng-init="model4={'name': itemsInGroup('Lights')[$index+4].label, 'item': itemsInGroup('Lights')[$index+4].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } ">
            <widget-switch   ng-model="model4" />
          </div>
        </td>
      </tr>
    </table> 
	</div>
	
	<div class="col-xs-2">
	<table style="width: 100%;">
      <tr>
        <td style="padding: 0px; padding-top: 10px;">
          <div ng-init="model5={'name': itemsInGroup('Lights')[$index+5].label, 'item': itemsInGroup('Lights')[$index+5].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } ">
            <widget-switch   ng-model="model5" />
          </div>
        </td>
      </tr>
    </table> 
	</div>

</div>
</td>
</tr>
</table>
3

You seem to have figured out the Boostrap grid system - <div class="col-xs-2"> should wrap nicely every 6 items without needing tables, isn’t that the case?

4

Yes.

I went back and cleaned up the code removing the tables. Everything wraps nicely every 6 times. I just haven’t figured out why I get the extra 4 in the last row.

Improved code, but still show 4 extra lights with no items. Still trying to self learn angularjs at the same time.

<div class="row">
  <div class="col-xs-12"><h3 style="color: #ffaa00; line-height: .1em;">Lighting Control</h3></div>
</div>
<div class="row" ng-repeat="item in itemsInGroup('Lights') track by $index" ng-if="$index % 6 == 0">
  <div class="col-xs-2"><div ng-init="model0={'name': itemsInGroup('Lights')[$index].label, 'item': itemsInGroup('Lights')[$index].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } "><widget-switch   ng-model="model0" /></div></div>
  <div class="col-xs-2"><div ng-init="model1={'name': itemsInGroup('Lights')[$index+1].label, 'item': itemsInGroup('Lights')[$index+1].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } "><widget-switch   ng-model="model1" /></div></div>
  <div class="col-xs-2"><div ng-init="model2={'name': itemsInGroup('Lights')[$index+2].label, 'item': itemsInGroup('Lights')[$index+2].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } "><widget-switch   ng-model="model2" /></div></div>
  <div class="col-xs-2"><div ng-init="model3={'name': itemsInGroup('Lights')[$index+3].label, 'item': itemsInGroup('Lights')[$index+3].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } "><widget-switch   ng-model="model3" /></div></div>
  <div class="col-xs-2"><div ng-init="model4={'name': itemsInGroup('Lights')[$index+4].label, 'item': itemsInGroup('Lights')[$index+4].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } "><widget-switch   ng-model="model4" /></div></div>
  <div class="col-xs-2"><div ng-init="model5={'name': itemsInGroup('Lights')[$index+5].label, 'item': itemsInGroup('Lights')[$index+5].name, 'hidelabel': false, 'hideonoff': true, 'iconset': 'smarthome-set','icon': 'bulb','icon_size': '62' } "><widget-switch   ng-model="model5" /></div></div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
</div>