Вы можете использовать ng-style для динамического изменения свойства класса CSS с помощью функции AngularJS.
Смотрите ниже код этого звенеть (http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview)
Я создал массив цветов, которые будут использоваться ng-repeat и изменить background-color каждого элемента динамически. Обратите внимание, что хотя все элементы имеют класс original с красным фоном, это значение обновляется (переопределяется) с новым цветом из массива.
Итак, теперь вы, наверное, думаете: «Круто Если я могу изменить свойство цвета класса динамически я должен быть в состоянии сделать то же самое с любой другой собственностью, как и content один прямо!?!?»
Ответ: «Да & No».
Кажется, что псевдоселекторов, таких как :after и :before, обрабатываются по-разному.
«Несмотря на то, что они визуализируются браузерами через CSS, как если бы они были , как и другие элементы реального DOM сами, псевдо-элементы не являются частью в DOM, и, таким образом, вы не можете выбрать и манипулировать ими непосредственно с AngularJS, JQuery (или каких-либо интерфейсов JavaScript в этом отношении»
вы можете найти полное объяснение на этот пост: (https://stackoverflow.com/a/5041526/1310945)
сказал, что, я полагаю, вы, вероятно, удастся обойти эту проблему , usin g это решение (https://stackoverflow.com/a/16507264/1310945).
Я еще не пробовал - но я мог бы сделать в другой раз просто для удовольствия.
На стороне примечания, возможно, есть лучшее решение (и более стиль AngularJs) для того, что вы пытаетесь сделать, используя ng-class.
В любом случае надеюсь, что это по крайней мере отправит вас в правильном направлении. :)
<!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>
Ваш html-код содержит угловые ярлыки js. Но: после будет работать по-другому. Поиск css: после документации. – Jeyasithar
Окей: после не является частью dom, но кто-то нашел способ динамически изменять CSS, он применим ко всем: См. Этот пример (до и после совершенно одинаковы) http: // jsfiddle .net/aKbmq/ – Romain