带有条件表达式的 AngularJS ng 样式

Posted 2023-02-19

【中文标题】带有条件表达式的 AngularJS ng 样式

【英文标题】：AngularJS ng-style with a conditional expression

【发布时间】：2013-10-22 22:20:52

【问题描述】：

我正在这样处理我的问题：

ng-style=" width: getTheValue() "

但为了避免在控制器端使用此功能，我更愿意做这样的事情：

ng-style=" width: myObject.value == 'ok' ? '100%' : '0%' "

我该怎么做？

【问题讨论】：

您使用的是什么版本的 Angular？至少在 1.1.5 中，这是可能的，无需任何更改。 demo

我使用的是 1.0.8 :) 太糟糕了，那我真的应该尝试升级...谢谢！

虽然在 1.1.5 中您的代码可以正常工作，但如果您使用其他样式属性而不是宽度（例如字体大小），您的代码将无法正常工作，直到您将其更改为：ng-style= " 'font-size': myObject.value == 'ok' ? '20px' : '10px' " （必须用引号括住样式属性）。

我不知道这有什么帮助，但对于新手来说，您可以将 ng 样式与对象一起使用，但就像这样 ng-style="objectBit ? 'border':'1px solid red' : '边框': '无' "

【参考方案1】：

正如@Yoshi 所说，从 Angular 1.1.5 开始，您无需任何更改即可使用它。

如果你使用angular ng-class。

.largeWidth 
    width: 100%;


.smallWidth 
    width: 0%;


// [...]

ng-class="largeWidth: myVar == 'ok', smallWidth: myVar != 'ok'"

【讨论】：

好的，谢谢！我只是想知道是否有一种方法可以不使用任何类，而是直接在模板上使用 Angular。

如果我使用 angular >1.1.5 ?

这并不能完全回答问题。

这个问题从字面上要求一个带有 ng-style 的示例，而接受了 100+ 票的答案没有提供。

这是错误的答案，下面@Arthur 的答案是正确的。

【参考方案2】：

一般来说，您可以使用ng-if 和ng-style 的组合，将条件更改与背景图像的更改结合起来。

<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'"></span>
        <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'"></span>

【讨论】：

这对我造成了Uncaught Error: Template parse errors: Can't bind to 'ng-style' since it isn't a known property of 'div' 错误

【参考方案3】：

简单示例：

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

'background-color':'green' 返回真

或相同的结果：

<div ng-style="isTrue && 'background-color':'green'" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

其他条件可能性：

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

【讨论】：

如果有多个独立的样式/条件，我怎么能做到这一点？谢谢，顺便说一句，答案很好。

@Arthur 您的示例将检查 isTrue 和 'background-color':'green' 或者它将仅检查 isTrue 并输入 background 它将如何工作请解释一下？

@rajnish-rajput 它将检查 isTrue 并放置背景，'background-color':'green' 默认返回 true 作为样式对象

这确实有效，但语法真的很奇怪。任何指向此文档的链接或有关它为何与 &&- 和 ||- 运算符一起使用的任何输入？

@ArthurTsidkilov 如果我想限制ng-style 只运行一次怎么办？我不能使用ng-class 和控制器范围变量，我需要在运行时计算所有容器的高度，但是一旦设置了属性，我想限制它以避免继续执行。

【参考方案4】：

如果你想使用 with 表达式，正确的方法是：

<span class="ng-style: yourCondition && color:'red';">Sample Text</span>

但最好的方法是使用 ng-class

【讨论】：

Syntax Error: Token '%3A' is%20an%20unexpected%20token at column 9 of the expression [ng-style%3A%...

【参考方案5】：

你可以这样实现：

ng-style=" 'width' : (myObject.value == 'ok') ? '100%' : '0%' "

【讨论】：

这应该是公认的答案。它实际上使用 ng-style 并允许为每种样式设置条件。

【参考方案6】：

@jfredsilva 显然有the simplest answer 的问题：

ng-style=" 'width' : (myObject.value == 'ok') ? '100%' : '0%' "

但是，对于更复杂的问题，您可能真的想考虑我的回答。

类似三元的例子：

<p ng-style="width: true:'100%',false:'0%'[myObject.value == 'ok']"></p>

更复杂的：

<p ng-style="
   color:       blueish: 'blue', greenish: 'green'[ color ], 
  'font-size':  0: '12px', 1: '18px', 2: '26px'[ zoom ]
">Test</p>

如果$scope.color == 'blueish'，颜色将为“蓝色”。

如果$scope.zoom == 2，字体大小为26px。

angular.module('app',[]);
function MyCtrl($scope) 
  $scope.color = 'blueish';
  $scope.zoom = 2;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl" ng-style="
   color:       blueish: 'blue', greenish: 'green'[ color ], 
  'font-size':  0: '12px', 1: '18px', 2: '26px'[ zoom ]
">
  color = color<br>
  zoom = zoom
</div>

【讨论】：

有趣的语法<value>:'<string>'[<$scope.var>]，它从何而来？

它只是使用括号符号来访问对象。 color['blueish'] == 'blue'

【参考方案7】：

这种三元运算符的语法也可以使用：

  ng-style="<$scope.var><condition> ? 
        '<css-prop-1>':((<value>) / (<value2>)*100)+'%',
        '<css-prop-2>':'<string>'
       : 
        '<css-prop-1>':'<string>',
        '<css-prop-2>':'<string>'
      "

<value> 是 $scope 属性值。 例如：

ng-style="column.histograms.value=>0 ? 
  
    'width':((column.histograms.value) / (column.histograms.limit)*100)+'%',
    'background':'#F03040'
   : 
    'width':'1px',
    'background':'#2E92FA'
  "

```

这允许对 css 属性值进行一些计算。

【参考方案8】：

对于多个独立的条件，我正在做如下操作，它就像魅力一样：

<div ng-style="valueFromJS === 'Hello' ? 'color': 'red' : 'color': '' && valueFromNG-Repeat === 'dayOfToday' ? 'font-weight': 'bold' : 'font-weight': 'normal'"></div>

【参考方案9】：

对于单个 css 属性

ng-style="1==1 && 'color':'red'"

下面的多个css属性可以参考

ng-style="1==1 && 'color':'red','font-style': 'italic'"

将 1==1 替换为您的条件表达式

【参考方案10】：

我正在使用 ng-class 来添加样式：-

 ng-class="column.label=='Description'  ? 'tableStyle':                     
           column.label == 'Markdown Type' ? 'Mtype' : 
           column.label == 'Coupon Number' ? 'couponNur' :  ''
           "

在 angular.js 中使用 三元运算符 和 ng-class 指令来赋予样式。 然后在 .css 或 .scss 文件中定义类的样式。例如：-

.Mtype
       width: 90px !important;
       min-width: 90px !important;
       max-width: 90px !important;
      
.tableStyle
         width: 129px !important;
         min-width: 129px !important;
         max-width: 129px !important;

.couponNur
         width: 250px !important;
         min-width: 250px !important;
         max-width: 250px !important;

【参考方案11】：

编辑：

好吧，我以前不知道AngularJS 通常指的是Angular v1 版本，而只有 Angular 到 Angular v2+

此答案仅适用于Angular

将此留在这里以备将来参考。

---

不确定它对你们是如何工作的，但在 Angular 9 上，我必须将 ngStyle 包裹在这样的括号中：

[ng-style]=" 'width' : (myObject.value == 'ok') ? '100%' : '0%' "

否则无效