根据 Angular 范围值更改 CSS

Posted 2023-02-23

【中文标题】根据 Angular 范围值更改 CSS

【英文标题】：Change CSS depending on Angular scope value

【发布时间】：2017-01-01 00:26:16

【问题描述】：

我正在尝试根据角度范围变量更改我的 css。让我这样解释我自己。

$scope.entries = [
    status: 'denied' 

我需要使元素的状态改变元素的背景：如果状态为拒绝，红色等等。

【问题讨论】：

查看这个答案***.com/questions/38974896/…

使用 ng-class docs.angularjs.org/api/ng/directive/ngClass

【参考方案1】：

在您看来，您可以使用 ngClass 指令有条件地将类应用于您的 html 元素。 Documentation here.

您需要创建一个具有所需样式的 css 类，然后在满足某些条件时应用该类，使用 ng-class 中的表达式。

文档中的一个示例：

CSS

.base-class 
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;


.base-class.my-class 
  color: red;
  font-size:3em;

查看

<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<br>
<span class="base-class" ng-class="myVar">Sample Text</span>

Plunker from docs

【参考方案2】：

如果你不想使用 ng-class，你可以这样做

<span class="status-var"></span>

css

.status-denied
  background: red;