Question

如果值等于或大于16，并且字符串包含以下单词＆＃39; hdl＆＃39;我试图将背景的样式更改为绿色。

我是用两个不同的条件完成的，但它搞砸了我的结果，我不认为这是最好的方法。

重申一点，我试图说一下value.runners.length =＆gt; 16和value.marketName包含字符串＆＃39; hdl＆＃39;如果没有添加此背景，其中的任何地方都会将背景更改为＃00FFBE。

<a ng-repeat="(key, value) in events" class="list-group-item" ng-if="value.runners.length => '16' && value.marketName.includes(hdl)" ng-style="{ background:'#00FFBE' }" ng-click="showRunners(value.marketStartTime,value.marketName,value.runners,value.marketStartTime)" >
                    {{value.marketStartTime | date:'dd-MMMM-yyyy h:mma'}} - {{value.marketName}}
                    <any style="float: right;"> 
                        <i class="fa fa-user"></i> {{value.runners.length}}

                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="fa fa-chevron-right"></i>
                    </any>
                </a>


                <a ng-repeat="(key, value) in events" class="list-group-item" ng-if="value.runners.length  <= '15'" ng-click="showRunners(value.marketStartTime,value.marketName,value.runners,value.marketStartTime)" >
                    {{value.marketStartTime | date:'dd-MMMM-yyyy h:mma'}} - {{value.marketName}}
                    <any style="float: right;"> 
                        <i class="fa fa-user"></i> {{value.runners.length}}

                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="fa fa-chevron-right"></i>
                    </any>
                </a>

Answer 1

有几种方法可以做到。

使用ng-style

<span ng-style="{background-color:(CONDITIONS FOR GREEN)?'green':'red'">Text</span>

条件可以是内联的，也可以调用函数并返回true / false

使用ng-class

<span ng-class="{'my-green-css':CONDITIONS FOR GREEN,'my-red-css':CONDITIONS FOR RED}"> Text </span>

你有my-green-css和my-red-css的CSS类。 CONDITIONS可以是内联的，也可以调用函数并返回true / false。

Answer 2

您可以使用一个功能并按以下方式实现此目的

<span ng-style="getStyle()">Sample Text</span>


$scope.getStyle=function(){
    if($scope.value.runners.length > = 16) {
        return {'background-color':'blue'}
    }else {
        return {'background-color':'red'}
    }
}

Answer 3

你可以做的就是

在CSS文件中：

.myStyle {
    background:'#00FFBE'
}

在HTML中：

<a ng-class="{myStyle: value.runners.length >= 16 && value.marketName.includes('hdl')}"></a>

Answer 4

<div [style.color]="hasError ? 'red' : 'black' ">

对于Angular

角度风格基于条件

4 个答案: