Question

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

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

我需要这样做，以便元素的状态改变元素的背景：如果状态被拒绝，红色等等。

Answer 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

Answer 2

如果你不想使用ng-class

，你可以这样做

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

CSS

.status-denied{
  background: red;
}

根据Angular范围值更改CSS

2 个答案: