根据 Angular 范围值更改 CSS答案

【问题标题】：Change CSS depending on Angular scope value根据 Angular 范围值更改 CSS
【发布时间】：2017-01-01 00:26:16
【问题描述】：

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

$scope.entries = [{
    status: 'denied' 
}

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

【问题讨论】：

查看这个答案stackoverflow.com/questions/38974896/…
使用 ng-class docs.angularjs.org/api/ng/directive/ngClass

标签： javascript html css angularjs

【解决方案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;
}

【讨论】：