blocks|key|219208|text|正如@Yoshi所说，从angular+1.1.5开始，你无需任何更改就可以使用-it。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219209|如果使用angular+<+1.1.5，则可以使用ng-class。|offset|length|219210|.largeWidth+{
++++width:+100%25;
}

.smallWidth+{
++++width:+0%25;
}

//+[...]

ng-class="{largeWidth:+myVar+==+'ok',+smallWidth:+myVar+!=+'ok'}"|code-block|syntax|javascript|219211|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.directive%253angClass^0|0|P|8|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

As @Yoshi said, from angular 1.1.5 you can use-it without any change.

If you use angular &lt; 1.1.5, you can use <a href="http://docs.angularjs.org/api/ng.directive%3angClass">ng-class</a>.

<pre><code>.largeWidth {
 width: 100%;
}

.smallWidth {
 width: 0%;
}

// [...]

ng-class="{largeWidth: myVar == 'ok', smallWidth: myVar != 'ok'}"
</code></pre>

blocks|key|219290|text|简单的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219291|<div+ng-style="isTrue+&&+{'background-color':'green'}+%7C%7C+{'background-color':+'blue'}"+style="width:200px;height:100px;border:1px+solid+gray;"></div>|code-block|syntax|javascript|219292|{'background-color':'green'}返回true|219293|或者相同的结果：|219294|<div+ng-style="isTrue+&&+{'background-color':'green'}"+style="width:200px;height:100px;border:1px+solid+gray;background-color:+blue"></div>|219295|其他条件可能性：|219296|<div+ng-style="count+===+0+&&+{'background-color':'green'}++%7C%7C+count+===+1+&&+{'background-color':'yellow'}"+style="width:200px;height:100px;border:1px+solid+gray;background-color:+blue"></div>|219297|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

simple example:

<pre><code>&lt;div ng-style="isTrue &amp;&amp; {'background-color':'green'} || {'background-color': 'blue'}" style="width:200px;height:100px;border:1px solid gray;"&gt;&lt;/div&gt;
</code></pre>

{'background-color':'green'} RETURN true

OR the same result: 

<pre><code>&lt;div ng-style="isTrue &amp;&amp; {'background-color':'green'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"&gt;&lt;/div&gt;
</code></pre>

other conditional possibility:

<pre><code>&lt;div ng-style="count === 0 &amp;&amp; {'background-color':'green'} || count === 1 &amp;&amp; {'background-color':'yellow'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"&gt;&lt;/div&gt;
</code></pre>

blocks|key|219388|text|你可以这样实现它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219389|ng-style="{+'width'+:+(myObject.value+==+'ok')+?+'100%25'+:+'0%25'+}"|code-block|syntax|javascript|219390|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can achieve it like that:

<pre><code>ng-style="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }"
</code></pre>

blocks|key|219358|text|如果你想和表达式一起使用，正确的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219359|<span+class="ng-style:+yourCondition+&&+{color:'red'};">Sample+Text|code-block|syntax|javascript|219360|但是最好的方法是使用ng-class。|219361|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

if you want use with expression, the rigth way is :

<pre><code>&lt;span class="ng-style: yourCondition &amp;&amp; {color:'red'};"&gt;Sample Text&lt;/span&gt;
</code></pre>

but the best way is using ng-class

blocks|key|219264|text|一般而言，您可以结合使用ng-if和ng-style，将条件更改与背景图像中的更改合并在一起。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|219265|<span+ng-if="selectedItem==item.id"
++++++++++++++ng-style="{'background-image':'url(../images/'%2B'{{item.id}}'%2B'_active.png)','background-size':'52px+57px','padding-top':'70px','background-repeat':'no-repeat','background-position':+'center'}">
++++++++<span+ng-if="selectedItem!=item.id"
++++++++++++++ng-style="{'background-image':'url(../images/'%2B'{{item.id}}'%2B'_deactivated.png)','background-size':'52px+57px','padding-top':'70px','background-repeat':'no-repeat','background-position':+'center'}">|code-block|syntax|javascript|219266|entityMap^0|C|5|I|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

On a generic note, you can use a combination of <code>ng-if</code> and <code>ng-style</code> incorporate conditional changes with change in background image.

<pre><code>&lt;span ng-if="selectedItem==item.id"
 ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)','background-size':'52px 57px','padding-top':'70px','background-repeat':'no-repeat','background-position': 'center'}"&gt;&lt;/span&gt;
 &lt;span ng-if="selectedItem!=item.id"
 ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)','background-size':'52px 57px','padding-top':'70px','background-repeat':'no-repeat','background-position': 'center'}"&gt;&lt;/span&gt;
</code></pre>

blocks|key|219485|text|对于单个css属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219486|ng-style="1==1+&&+{'color':'red'}"|code-block|syntax|javascript|219487|对于多个css属性，可以参考以下内容|219488|ng-style="1==1+&&+{'color':'red','font-style':+'italic'}"|219489|用您的条件表达式替换1==1|219490|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

For single css property

<pre><code>ng-style="1==1 &amp;&amp; {'color':'red'}"
</code></pre>

For multiple css properties below can be referred

<pre><code>ng-style="1==1 &amp;&amp; {'color':'red','font-style': 'italic'}"
</code></pre>

Replace 1==1 with your condition expression

blocks|key|2708|text|对于多个独立的条件，我像下面这样做，它像魅力一样工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2709|<div+ng-style="{{valueFromJS}}+===+'Hello'+?+{'color':+'red'}+:+{'color':+''}+&&+valueFromNG-Repeat+===+'{{dayOfToday}}'+?+{'font-weight':+'bold'}+:+{'font-weight':+'normal'}"></div>|code-block|syntax|javascript|2710|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I am doing like below for multiple and independent conditions and it works like charm:

<pre><code>&lt;div ng-style="{{valueFromJS}} === 'Hello' ? {'color': 'red'} : {'color': ''} &amp;&amp; valueFromNG-Repeat === '{{dayOfToday}}' ? {'font-weight': 'bold'} : {'font-weight': 'normal'}"&gt;&lt;/div&gt;
</code></pre>

blocks|key|2672|text|同样，这个三元运算符的语法也会起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2673|++ng-style="<$scope.var><condition>+?+{
++++++++'<css-prop-1>':((<value>)+/+(<value2>)*100)%2B'%25',
++++++++'<css-prop-2>':'<string>'
++++++}+:+{
++++++++'<css-prop-1>':'<string>',
++++++++'<css-prop-2>':'<string>'
++++++}"|code-block|syntax|javascript|2674|其中<value>是$scope属性值。在示例中：|offset|length|style|CODE|2675|ng-style="column.histograms.value=>0+?+
++{
++++'width':((column.histograms.value)+/+(column.histograms.limit)*100)%2B'%25',
++++'background':'#F03040'
++}+:+{
++++'width':'1px',
++++'background':'#2E92FA'
++}"|2676|2677|这允许对css属性值进行一些计算。|2678|entityMap^0|0|0|2|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|P|3|Q|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

also this syntax for ternary operator will work:

<pre><code> ng-style="&lt;$scope.var&gt;&lt;condition&gt; ? {
 '&lt;css-prop-1&gt;':((&lt;value&gt;) / (&lt;value2&gt;)*100)+'%',
 '&lt;css-prop-2&gt;':'&lt;string&gt;'
 } : {
 '&lt;css-prop-1&gt;':'&lt;string&gt;',
 '&lt;css-prop-2&gt;':'&lt;string&gt;'
 }"
</code></pre>

where <code>&lt;value&gt;</code> are $scope property values.
In example:

<pre><code>ng-style="column.histograms.value=&gt;0 ? 
 {
 'width':((column.histograms.value) / (column.histograms.limit)*100)+'%',
 'background':'#F03040'
 } : {
 'width':'1px',
 'background':'#2E92FA'
 }"
</code></pre>

```

this allows for some calculaton into the css property values.

blocks|key|2790|text|编辑：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2791|好的，我之前并不知道AngularJS通常指的是Angular+v1版本，并且只涉及Angular+v2%2B|offset|length|style|CODE|2792|此答案仅适用于Angular|2793|把这个留在这里以备将来参考..|2794|2795|不知道它对你们是如何工作的，但在Angular+9上，我必须将ngStyle放在括号中，如下所示：|2796|[ng-style]="{+'width'+:+(myObject.value+==+'ok')+?+'100%25'+:+'0%25'+}"|code-block|syntax|javascript|2797|否则它就不能工作|2798|entityMap^0|0|A|9|O|7|0|7|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|19|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1A|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|W|$]]

<h2>EDIT:</h2>
Ok i was previously not aware that <code>AngularJS</code> usually refers to <code>Angular</code> v1 version and only Angular to Angular v2+
This answer only applies for <code>Angular</code>
Leaving this here for future reference..
<hr />
Not sure how it works for you guys but on Angular 9 i have to wrap ngStyle in brackets like this:
<pre><code>[ng-style]=&quot;{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }&quot;
</code></pre>
Otherwise it doesn't work

I am handling my issue like this:

<pre><code>ng-style="{ width: getTheValue() }"
</code></pre>

But to avoid having this function on the controller side, I would much prefer to do something like this:

<pre><code>ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }"
</code></pre>

How can I do this?

AngularJS ng-style with a conditional expression

我是这样处理我的问题的：ng-style="{ width: getTheValue() }"但是为了避免在控制器端使用这个函数，我更喜欢这样做：ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }"我该怎么做呢？

问使用条件表达式的AngularJS ng样式
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用条件表达式的AngularJS ng样式EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用条件表达式的AngularJS ng样式
EN