如何改变Angular中之前/之后的样式？

Question

我正在尝试使用CSS中的前/后三角形实现面包屑,如本教程所示:

http://css-tricks.com/triangle-breadcrumbs/

相关摘要:

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
</ul>

.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 65px;
    background: hsla(34,85%,35%,1); 
    position: relative; 
    display: block;
    float: left;
}

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

但是,我将它用作定向流程,例如:

Main_Category >> Sub_Category >>详细信息

此流程从Main_Category突出显示,其他两个部分变暗,并且您可以从中选择.在选择时,Sub_Category突出显示,另一个弹出.

我的问题是如果它们是伪元素,如何更改前/后边框颜色？所以从教程中,我认为可以在主要部分做到这一点:

<li><a href="#" ng-style="background: {{color}}">Home</a></li>

但是我无法在之前/之后设置ng-style,并且三角形颜色最终没有变化.

Answer 1

如果我正确理解了您的问题,您想知道如何使用angular指令动态设置前/后伪标签的样式.

不使用ng-style,而是使用ng-class附加一个类,该类将确定要使用的伪类之前/之后.

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

在CSS中:

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}