Question

http://skymics.com/Energy/sampleschematic.jpg看到这张照片。我希望我的6个盒子在图片上方的6条垂直线上。我不知道如何为我使用的ng-repeat提供不同的填充样式。我使用[ng-class]但它不起作用。我已经在互联网上搜索了所有来源ng-class。不知道我是否正确使用它。它是nessecary。请帮助。

<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 {
}

Answer 1

您使用的是ng-class错误的方式！

使用它的实际方法如下 -

ng-class="{'evenClass': $even, 'oddClass': $odd, 'firstClass': $first, 'lastClass': $last}"

对于在单个var中定义的类（例如var className = 'bla';） -

ng-class="bla"

如何为ng-repeat元素提供不同的填充样式？

1 个答案: