Menu
I like the way examples by bootstrap looks
<css>
.bs-docs-example {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
...
}
.bs-docs-example:after {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Title";
...
}
But I need to change the content in the .bs-docs-example:after dynamically as this:
<html>
<div class="bs-docs-example" ng-style="content:'{{ title }}';"
ng-repeat="title in titles">
Is this something possible? How?
812
In this article, we will see how to dynamically create a CSS class and apply to the element dynamically using JavaScript. To do that, first we create a class and assign it to HTML elements on which we want to apply CSS property. We can use className and classList property in JavaScript.
The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case of a string.
You can use Javascript for adding a class: setAttribute and className both method are used to set class (class attribute), these method are not used to adding another class with existing one. Save this answer.
The NgClass directive allows you to set the CSS class dynamically for a DOM element.
I did something similar using ng-bind-html, I lacked control, over the content, so I modify a class that'll handle it afterwards
var somecolorvar = "#F00";
$scope.mystyles = ".something:after { color: " + somecolorvar + "; }";
<style ng-bind-html="mystyles"></style>
Then you'll get something like this
<style>.something:after { color: #F00; }</style>
EDIT: You can also handle the issue above via css attr() which will pull the attribute into the content
.something:after {
display: inline;
content: '- Value ' attr(value);
}
<div class="something" value="123">this is</div>
<div class="something" value="456">this be</div>
You'll see something like:
this is - Value 123
this be - Value 456
You can use ng-style to dynamically change a CSS class property using AngularJS.
See the code below or this plunk (http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview)
I've created an array of colours to be used by the ng-repeat and change the background-color of each item dynamically.
Note that although all the items have a class called original with red background, that value is updated (override) with a new colour from the array.
So now you're probably thinking: "Cool! If I can change the class color property dynamically I should be able to do the same with any other property, like the content one right ?!?"
The answer is "Yes & No".
It seems pseudo selectors like :after and :before are treated differently.
"Although they are rendered by browsers through CSS as if they were like other real DOM elements, pseudo-elements themselves are not part of the DOM, and thus you can't select and manipulate them directly with AngularJS, jQuery (or any JavaScript APIs for that matter"
You can find a full explanation on this post: (https://stackoverflow.com/a/5041526/1310945)
Have said that, I believe you can probably manage to work around this, using this solution (https://stackoverflow.com/a/16507264/1310945).
I haven't tried yet - but I might do another time just for fun.
On a side note, maybe there's a better solution ( and more AngularJs style approach) for what you're trying to do using ng-class.
Anyway hope this at least send you on the right direction. :)
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css">
<style>
ul {
list-style-type: none;
color: #fff;
}
li {
padding: 10px;
text-align: center;
}
.original {
background-color: red;
}
</style>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
$scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
$scope.style = function(value) {
return { "background-color": value };
}
}]);
</script>
</head>
<body>
<div ng-controller="myAppCtrl">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li ng-repeat="color in colors">
<h4 class="original" ng-style="style(color)"> {{ color }}</h5>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
