Hello,
I’ve been busy with a pop-up widget to display my blinds.
I’m using the ng-repeat function 2 times because I have different kind of blinds.
this is my code:
<script type="text/ng-template" id="myModalContent.html">
<div class="container" style="padding: 30px; border: 1px solid #456;">
<a ng-click="$close()" class="pull-right btn btn-danger">X</a>
<h3 style="color: white">Rolluiken</h3>
<table style="width:100%">
<tr>
<td>
<ul ng-repeat="item in itemsInGroup('gRolluiks')" ng-init="models={}">
<li class="col-md-4"
ng-init="models[item.name] = { name: item.label, item: item.name, step: 1 }">
<div class="box" style="height: 150px; margin: 10px">
<div class="leftborder" style="height: 118px"></div>
<div class="leftborder-label">{{item.label}}</div>
<div class="blinds-leftborder"
ng-init="model={item: config.item, hidelabel: true, vertical: true, hidepointer: true, hidelimits: true }">
<div class="blades">
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*7 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*6 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*5 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*4 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*3 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*2 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) == 0 }"></div>
</div>
<widget-slider ng-model="model" style="height: 110px; margin-left: -5px; margin-top: -50px; display: inline-block;"></widget-slider>
</div>
<div style="margin-left: 15px; margin-top: -10px">
<div class="switch btn-group switch-leftborder">
<button class="btn btn-default" style="padding: 3px 10px 0 10px"
ng-class="{'btn-primary': itemState(config.item)==='UP', 'btn-default': itemState(config.item)!=='UP' }"
ng-click="sendCmd(config.item, 'UP')">
<i style="font-size: 1.5em" class="glyphicon glyphicon-arrow-up"></i>
</button>
<button class="btn" style="padding: 6px"
ng-class="{'btn-primary': itemState(config.item)==='STOP', 'btn-default': itemState(config.item)!=='STOP' }"
ng-click="sendCmd(config.item, 'STOP')">
<i class="glyphicon glyphicon-remove" style="font-size: 1.5em"></i>
</button>
<button class="btn btn-default" style="padding: 3px 12px 0 8px"
ng-class="{'btn-primary': itemState(config.item)==='DOWN', 'btn-default': itemState(config.item)!=='DOWN' }"
ng-click="sendCmd(config.item, 'DOWN')">
<i style="font-size: 1.5em" class="glyphicon glyphicon-arrow-down"></i>
</button>
</div>
</div>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul ng-repeat="item in itemsInGroup('gRolluik')" ng-init="models={}">
<li class="col-md-4"
ng-init="models[light.name] = { name: light.label, item: light.name, step: 1 }">
<div class="box" style="height: 150px; margin: 10px">
<div class="leftborder" style="height: 118px"></div>
<div class="leftborder-label">{{item.label}}</div>
<div class="blinds-leftborder"
ng-init="model={item: config.item, hidelabel: true, vertical: true, hidepointer: true, hidelimits: true }">
<div class="blades">
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*7 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*6 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*5 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*4 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*3 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5*2 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) <= 12.5 }"></div>
<div class="blade" ng-class="{ down: +itemState(config.item) == 0 }"></div>
</div>
<widget-slider ng-model="model" style="height: 110px; margin-left: -5px; margin-top: -50px; display: inline-block;"></widget-slider>
</div>
<div style="margin-left: 15px; margin-top: -10px">
<div class="switch btn-group switch-leftborder">
<button class="btn btn-default" style="padding: 3px 10px 0 10px"
ng-class="{'btn-primary': itemState(config.item)==='ON', 'btn-default': itemState(config.item)!=='ON' }"
ng-click="sendCmd(config.item, 'ON')">
<i style="font-size: 1.5em" class="glyphicon glyphicon-arrow-up"></i>
</button>
<button class="btn btn-default" style="padding: 3px 12px 0 8px"
ng-class="{'btn-primary': itemState(config.item)==='OFF', 'btn-default': itemState(config.item)!=='OFF' }"
ng-click="sendCmd(config.item, 'OFF')">
<i style="font-size: 1.5em" class="glyphicon glyphicon-arrow-down"></i>
</button>
</div>
</div>
</div>
</li>
</ul>
</td>
</tr>
</table>
</div>
</script>
<button class="btn btn-default btn-lg"
ng-click="openModal('myModalContent.html', true, 'lg')">
Rolluiken
</button>
But how can I define the item for each blind? It doesn’t work this way.
and the blinds aren’t aligned well. There is a difference between them. How could I solve this?
