# Need help with ng-repeat

**URL:** <https://community.openhab.org/t/need-help-with-ng-repeat/23076>\
**Category:** HABPanel\
**Created:** [February 15, 2017, 10:55pm UTC](https://community.openhab.org/t/need-help-with-ng-repeat/23076 "2017-02-15T22:55:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ptmuldoon](https://community.openhab.org/user_avatar/community.openhab.org/ptmuldoon/32/36858_2.png) [@ptmuldoon](https://community.openhab.org/u/ptmuldoon)\
**Post date:** [February 15, 2017, 10:55pm UTC](https://community.openhab.org/t/need-help-with-ng-repeat/23076/1 "2017-02-15T22:55:24Z")

</div>

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?

```auto
<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>
```

---

<div class="post-metadata">

**Author:** ![ptmuldoon](https://community.openhab.org/user_avatar/community.openhab.org/ptmuldoon/32/36858_2.png) [@ptmuldoon](https://community.openhab.org/u/ptmuldoon)\
**Post date:** [February 16, 2017, 9:12pm UTC](https://community.openhab.org/t/need-help-with-ng-repeat/23076/2 "2017-02-16T21:12:17Z")

</div>

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.

![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/b/b1351d3aa221e44092982b355767ea36f3d16b93.png)

And the code

```auto
<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>
```

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [February 16, 2017, 10:18pm UTC](https://community.openhab.org/t/need-help-with-ng-repeat/23076/3 "2017-02-16T22:18:44Z")

</div>

You seem to have figured out the [Boostrap grid system](http://getbootstrap.com/css/#grid) - `<div class="col-xs-2">` should wrap nicely every 6 items without needing tables, isn’t that the case?

---

<div class="post-metadata">

**Author:** ![ptmuldoon](https://community.openhab.org/user_avatar/community.openhab.org/ptmuldoon/32/36858_2.png) [@ptmuldoon](https://community.openhab.org/u/ptmuldoon)\
**Post date:** [February 16, 2017, 11:24pm UTC](https://community.openhab.org/t/need-help-with-ng-repeat/23076/4 "2017-02-16T23:24:15Z")

</div>

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.

```auto
<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>
```