http://skymics.com/Energy/sampleschematic.jpg see this picture.i want my 6 boxes go on the 6 vertical lines above the picture. i dont know how to give different padding styles to this ng-repeat I have used.i have used [ng-class] but it does not work.i have serched the internet all sources talked about ng-class.i dont know if i used it correctly or not.it is nessecary .please help .
<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> and my css is :
<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; /*width: 892px; !*/ } #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; /*width: 134px; !* plan width = 180 + 20 + 20 + 1 + 1 = 222px *!*/ float: left; opacity: 0.9; position: relative; } /*#container .plan:nth-child(1) {*/ /*-moz-border-radius: 5px 0 0 5px;*/ /*-webkit-border-radius: 5px 0 0 5px;*/ /*border-radius: 5px 0 0 5px;*/ /*}*/ /* --------------- */ #container h3 { font-size: 20px; font-weight: normal; padding: 20px; margin: -20px -20px 50px -20px; background-color: #eee; background-image: -moz-linear-gradient(#fff, #eee); background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); background-image: -webkit-linear-gradient(#fff, #eee); background-image: -o-linear-gradient(#fff, #eee); background-image: -ms-linear-gradient(#fff, #eee); background-image: linear-gradient(#fff, #d9edf7); } /*#container .plan:nth-child(1) h3 {*/ /*-moz-border-radius: 5px 0 0 0;*/ /*-webkit-border-radius: 5px 0 0 0;*/ /*border-radius: 5px 0 0 0;*/ /*!*}*!*/ #container h3 span { display: block; font: bold 25px/100px Georgia, Serif; color: #777; background: #F21432; border: 5px solid #fff; height: 100px; width: 100px; margin: 10px auto -65px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; } /* --------------- */ #container ul { margin: 20px 0 0 0; padding: 0; list-style: none; } #container li { border-top: 1px solid #ddd; padding: 10px 0; } /* --------------- */ #container .Amp { position: relative; padding: 8px 20px; /*margin: 20px 0 0 0;*/ color: #fff; font: bold 14px Arial, Helvetica; text-transform: uppercase; text-decoration: none; /*display: inline-block;*/ background-color: #0b97c4; background-image: -moz-linear-gradient(#0b97c4, #0b97c4); background-image: -webkit-gradient(linear, left top, left bottom, from(#0b97c4), to(#0b97c4)); background-image: -webkit-linear-gradient(#0b97c4, #0b97c4); background-image: -o-linear-gradient(#0b97c4, #0b97c4); background-image: -ms-linear-gradient(#0b97c4, #0b97c4); background-image: linear-gradient(#0b97c4, #0b97c4); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); } .evenClass { } .oddClass { } .firstClass { padding-top: 40px; } .lastClass { } 
