I have a div with an after and I would like to change the background color of this after dynamically via controller, however I am not succeeding when importing ng-class into the parent div.
<div class="infos" ng-class="myController.infoBlue">
My Infos.
:after
</div>
Note: I have different styles in div and o: after. The div has a background of one color and my after has a background of another color and I want to change only the after.
Take a look at the code below and see if it helps.
Or check out the link
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script><script>functionCtrl($scope){$scope.items=[{'color':'blue'},{'color':'red'},{'color':'green'}];$scope.selection=$scope.items[0];}</script><style>p.blue::after{content:" - in Blue";
background-color:blue;
color: #fff;
}
p.red::after {
content: " - in Red";
background-color:red;
color: #fff;
}
p.green::after {
content: " - in Green";
background-color:green;
color: #fff;
}
</style>
</head>
<body>
<div ng-controller="Ctrl">
<p ng-class="selection.color">I love Brazil! </p>
<select ng-model="selection" ng-options="item.color for item in items">
</select>
<tt>selection={{selection.color}}</tt>
</div>
</body>
</html>
The ng-class works through a condition, it needs an expression to apply or not certain class, for example:
<div class="minhaDiv" ng-class="{'classeSecundaria': meuValor > 5}">Teste</div>
In this case the class classeSecundaria would be applied to the div if the meuValor property has a value greater than 5.
In your case just do this check and apply the desired class. Otherwise it's just setting css .
To change the color dynamically, you can do something like this:
.menu:after {
background:red;
}
.menu.azul:after {
background:blue;
}
See this example working: