如何为ng-repeat元素赋予不同的填充样式? [英] how to give different padding styles to ng-repeat elements?
本文介绍了如何为ng-repeat元素赋予不同的填充样式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
http://skymics.com/Energy/sampleschematic.jpg 看到这张图片.我希望我的6个盒子位于图片上方的6条垂直线上.我不知道如何为我使用过的 ng-repeat 提供不同的填充样式.我使用过 [ng-class] ，但是它不起作用.互联网上所有消息来源都谈到了 ng-class .我不知道我是否正确使用了它.这是必要的.请帮助.
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>
我的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;
/*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 {
}
推荐答案
您以错误的方式使用了 ng-class ！
You are using ng-class the wrong way!
使用它的实际方法如下-
The actual way of using it is as below-
ng-class="{'evenClass': $even, 'oddClass': $odd, 'firstClass': $first, 'lastClass': $last}"
对于在单个var中定义的类(例如 var className ='bla'; )-
And for a class defined in a single var (e.g. var className = 'bla';)-
ng-class="bla"
这篇关于如何为ng-repeat元素赋予不同的填充样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
