基于条件的角度样式 [英] Angular - Style Based On Condition

问题描述

如果值等于或大于16并且字符串中包含以下单词"hdl"，则尝试将背景样式更改为绿色.

I am trying to change the style of a background to green if a value is equal or greater than 16 and if a string contains the following word 'hdl'.

我在两个不同的条件下完成了此操作，但是它弄乱了我的结果，我认为这不是最好的方法.

I done it with two separate conditions but it messed up my results and I don't think its the best way to do it.

所以要重申一下，我想说的是value.runners.length => 16和value.marketName是否在其中的任何地方包含字符串"hdl"，如果不添加背景，则将背景更改为#00FFBE.

So to reiterate, I'm trying to say if value.runners.length => 16 and value.marketName contains the string 'hdl' anywhere within it change background to #00FFBE if not don't add this background.

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

推荐答案

有两种方法可以实现.

使用ng-style

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

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

CONDITIONS can be either inline or your can call a function and return 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类的地方.条件可以是内联的，也可以调用一个函数并返回true/false.

Where you have a CSS class for my-green-css and my-red-css. The CONDITIONS can either be inline, or you can call a function and return true/false.

这篇关于基于条件的角度样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！