Take a look at this image. I need to position my 6 boxes on the 6 vertical lines above the image. I am struggling with applying different padding styles to my ng-repeat directive. Although I tried using [ng-class], it doesn't seem to work as expected. I have looked through various online resources but all the discussions revolve around ng-class. I'm not sure if I'm using it correctly or not. Your assistance is greatly appreciated.
<div style="background-color: white">
<div id="container" class="row" style="padding-left: 150px">
<div class="col-md-6" ng-repeat="row in msg.payload"
ng-class=" {'evenClass': $even, 'oddClass': $odd , 'firstClass':$first,'lastClass':$last} ">
<div class="plan col-md-4">
<h3>Voltage : {{row.Voltage}}
<span ng-class="row.Switch " ng-if="row.Switch == 'OFF'"
style="background: red">{{row.Switch}}</span>
<span ng-class="row.Switch" ng-if="row.Switch == 'ON'"
style="background: green">{{row.Switch}}</span>
</h3>
<script>
$(document).ready(function () {
setInterval(function (blinker) {
$("span").fadeIn(500);
$("span").fadeOut(500);
}, 1000)
});
</script>
<div class="Amp">Amp</div>
<ul>
<li><b>P1: </b>{{row.P1}}</li>
<li><b>P2: </b>{{row.P2}}</li>
<li><b>P3: </b>{{row.P3}}</li>
<li><b>N: </b>{{row.N}}</li>
</ul>
</div>
</div>
</div>
Here is my CSS:
<style>
body, html {
height: 100%;
margin: 0;
/*background: #303030;*/
}
.bg {
/* The image used */
background-image: url("http://skymics.com/Energy/sampleschematic.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#container {
/*margin: 100px auto;*/
text-align: center;
}
#container .plan {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255, 255, 255, .8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
float: left;
opacity: 0.9;
position: relative;
}
/* Styles for different elements */
.evenClass {
}
.oddClass {
}
.firstClass {
padding-top: 40px;
}
.lastClass {
}