angularJS nth-child不能用于重复

时间:2018-03-28 11:52:03

标签: css angularjs css-selectors

我试图更改使用ng-repeat写入页面的每第二行内容的背景颜色。 我让它工作......有点儿。 根据我目前的代码,它仅适用于字体颜色,而不适用于背景颜色。

这是我的代码。请告诉我我做错了什么。

<div class="row" style="margin: 25px 0;">
<div ng-repeat="katt in minaKatter" class="cat-row-ads test" ng-if="!katt.isDeceased && katt.canBeBreedingMale"> 
    <div class="tableContainer test col-xs-12">
        <div class="col-xs-12 col-md-6">
            <img src="data:image/jpeg,{{katt.imageId}}" alt="" class="row-image" style="margin-right: 10px; max-width: 40px;">
            <span style="font-weight: bold; font-size: 12px; line-height: 30px;" ng-bind="katt.name"></span>
        </div>

        <div class="col-xs-12 col-md-3" style="line-height: 30px;">
            <div ng-if="katt.avelshane && katt.status == 1">
                <span class="label-style label label-default">ANNONSERA</span>
            </div>
            <div ng-if="katt.annonsTyp == '1'">
                <span class="label-style label label-default">TILLHÖR</span>
            </div>
            <div ng-if="katt.annonsTyp == '3' && katt.status == 1">
                <span class="label-style label label-default">ANNONSERA</span>
            </div>
        </div>

        <div class="col-xs-12 col-md-3">
            <a href="create-male-ad.php?catId={{katt.id}}" ng-if="(katt|| katt) && (katt== 2 || !katt)" class="btn btn-back btn-sm"><i class="fa fa-pencil" aria-hidden="true"></i> Skapa / Redigera annons</a>
        </div>
    </div>

</div></div>

CSS:
.tableContainer {
    padding: 5px 8px; 
}

.test:nth-child(odd){
    color: red;
    background-color: black;
    border-bottom: 1px solid orange;
}

2 个答案:

答案 0 :(得分:1)

问题是您申请的第n个子课程不正确。它将检查相应类名的第n个子项。 HTML应该像。

一样改变
<div class="row" style="margin: 25px 0;">
<div ng-repeat="katt in minaKatter" class="cat-row-ads test" ng-if="!katt.isDeceased && katt.canBeBreedingMale"> 
    <div class="tableContainer col-xs-12">
        <div class="col-xs-12 col-md-6">
            <img src="data:image/jpeg,{{katt.imageId}}" alt="" class="row-image" style="margin-right: 10px; max-width: 40px;">
            <span style="font-weight: bold; font-size: 12px; line-height: 30px;" ng-bind="katt.name"></span>
        </div>

        <div class="col-xs-12 col-md-3" style="line-height: 30px;">
            <div ng-if="katt.avelshane && katt.status == 1">
                <span class="label-style label label-default">ANNONSERA</span>
            </div>
            <div ng-if="katt.annonsTyp == '1'">
                <span class="label-style label label-default">TILLHÖR</span>
            </div>
            <div ng-if="katt.annonsTyp == '3' && katt.status == 1">
                <span class="label-style label label-default">ANNONSERA</span>
            </div>
        </div>

        <div class="col-xs-12 col-md-3">
            <a href="create-male-ad.php?catId={{katt.id}}" ng-if="(katt|| katt) && (katt== 2 || !katt)" class="btn btn-back btn-sm"><i class="fa fa-pencil" aria-hidden="true"></i> Skapa / Redigera annons</a>
        </div>
    </div>

</div></div>

test类名

的元素中不需要tableContainer

请查看下面的代码段。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.minaKatter = [{imageId: 0}, {imageId: 1}, {imageId: 2}, {imageId: 3}]
});
.tableContainer {
    padding: 5px 8px; 
}

.test:nth-child(odd){
    color: red;
    background-color: black;
    border-bottom: 1px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="katt in minaKatter" class="cat-row-ads test"> 
    <div class="tableContainer col-xs-12">
    	Test
    </div>
</div>

答案 1 :(得分:0)

我建议您为元素使用不同的类,并使用 ng-class 工具在ng-repeat的偶数/奇数索引上添加规则:

<div class="row" style="margin: 25px 0;">
    <div ng-repeat="katt in minaKatter" class="cat-row-ads test" ng-if="!katt.isDeceased && katt.canBeBreedingMale"> 
        <div ng-class="{1:'tableContainer test-red col-xs-12', 0:'tableContainer col-xs-12'}[$index % 2 == 0]" class="tableContainer test col-xs-12">
            <div class="col-xs-12 col-md-6">
                <img src="data:image/jpeg,{{katt.imageId}}" alt="" class="row-image" style="margin-right: 10px; max-width: 40px;">
                <span style="font-weight: bold; font-size: 12px; line-height: 30px;" ng-bind="katt.name"></span>
            </div>

        <div class="col-xs-12 col-md-3" style="line-height: 30px;">
            <div ng-if="katt.avelshane && katt.status == 1">
                <span class="label-style label label-default">ANNONSERA</span>
            </div>
            <div ng-if="katt.annonsTyp == '1'">
                <span class="label-style label label-default">TILLHÖR</span>
            </div>
            <div ng-if="katt.annonsTyp == '3' && katt.status == 1">
                <span class="label-style label label-default">ANNONSERA</span>
            </div>
        </div>

        <div class="col-xs-12 col-md-3">
            <a href="create-male-ad.php?catId={{katt.id}}" ng-if="(katt|| katt) && (katt== 2 || !katt)" class="btn btn-back btn-sm"><i class="fa fa-pencil" aria-hidden="true"></i> Skapa / Redigera annons</a>
        </div>
    </div>
</div></div>

CSS:

.tableContainer {
    padding: 5px 8px; 
}

.test-red{
    color: red;
    background-color: black;
    border-bottom: 1px solid orange;
}