Question

我试图更改使用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;
}

Answer 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>

Answer 2

我建议您为元素使用不同的类，并使用 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;
}

angularJS nth-child不能用于重复

2 个答案: