Hi everyone,
I’m trying to design a custom widget for HabPanel that repeats the status of all my batteries in my setup. I know I can create and configure a widget for each item individually, but using the repeat function must be more efficient, especially if I add new devices to my setup.
I’ve found the repeat function and I’m getting one column that lists 6 of my items correctly. However, the second and third columns just repeat the items in the first column. What part of the repeat function, I am not understanding? I’m pretty sure it has something to do with my (mis)understanding of the ng-init and model part.
<
div class="row" ng-repeat="item in itemsInGroup('Batterien') track by $index" ng-if="$index % 3 == 0">
<div class="col-xs-2">
<div ng-init="model0={'name': itemsInGroup('Batterien')[$index].label, 'item': itemsInGroup('Batterien')[$index].name} ">
<div ng-if="item.state == 'OFF'">
<div class="widgetTitle">{{item.label.split(':').slice(0,2).join(':')}}</div>
<div ng-include="'/static/images/battery_full.svg'"></div>
</div>
<div ng-if="item.state == 'ON'">
<div class="widgetTitle">{{item.label.split(':').slice(0,2).join(':')}}</div>
<div ng-include="'/static/images/battery_low.svg'"></div>
</div>
</div>
</div>
<div class="col-xs-2">
<div ng-init="model1={'name': itemsInGroup('Batterien')[$index+1].label, 'item': itemsInGroup('Batterien')[$index+1].name} ">
<div ng-if="item.state == 'OFF'">
<div class="widgetTitle">{{item.label.split(':').slice(0,2).join(':')}}</div>
<div ng-include="'/static/images/battery_full.svg'"></div>
</div>
<div ng-if="item.state == 'ON'">
<div class="widgetTitle">{{item.label.split(':').slice(0,2).join(':')}}</div>
<div ng-include="'/static/images/battery_low.svg'"></div>
</div>
</div>
</div>
<div class="col-xs-2">
<div ng-init="model2={'name': itemsInGroup('Batterien')[$index+2].label, 'item': itemsInGroup('Batterien')[$index+2].name} ">
<div ng-if="item.state == 'OFF'">
<div class="widgetTitle">{{item.label.split(':').slice(0,2).join(':')}}</div>
<div ng-include="'/static/images/battery_full.svg'"></div>
</div>
<div ng-if="item.state == 'ON'">
<div class="widgetTitle">{{item.label.split(':').slice(0,2).join(':')}}</div>
<div ng-include="'/static/images/battery_low.svg'"></div>
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
</div>
This is what my widget looks like so far:
Any assistance or pointers would be greatly appreciated.
Rob