使用 AngularJS 动态更改 css 类的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18918458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically change a css class' properties with AngularJS
提问by Romain
I like the way examples by bootstrap looks
我喜欢 bootstrap 示例的样子
<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 contentin the .bs-docs-example:afterdynamically as this:
但我需要动态更改.bs-docs-example:after 中的内容，如下所示：
<html>
<div class="bs-docs-example" ng-style="content:'{{ title }}';"
ng-repeat="title in titles">
Is this something possible? How?
这是可能的吗？如何？
采纳答案by Romain
Actually I found a solution that doesn't involve :after (I'm so bad in CSS I haven't thought about it sooner ...) I also learn a bit in CSS. Here goes :
实际上我找到了一个不涉及 :after 的解决方案（我在 CSS 方面很糟糕，我没有早点考虑过......）我也在 CSS 中学习了一些。开始 ：
<css>
.bs-docs-example {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
...
}
.bs-docs-example-title {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Title";
...
}
and use it like this :
并像这样使用它：
<html>
<div class="bs-docs-example" ng-repeat="title in titles">
<span class="bs-docs-example-title">{{ title }}</span>
</div>
I hoped that helps.
我希望这会有所帮助。
回答by Vince
I did something similar using ng-bind-html, I lacked control, over the content, so I modify a class that'll handle it afterwards
我使用 ng-bind-html 做了类似的事情，但我缺乏对内容的控制，所以我修改了一个稍后处理它的类
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
编辑：您还可以通过 css attr() 处理上述问题，这会将属性拉入内容中
.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
回答by Denison Luz
You can use ng-styleto dynamically change a CSS class property using AngularJS.
您可以使用ng-styleAngularJS 动态更改 CSS 类属性。
See the code below or this plunk (http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview)
请参阅下面的代码或此 plunk ( http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview)
I've created an array of colours to be used by the ng-repeatand change the background-colorof each item dynamically.
我创建了一个颜色数组，供 使用ng-repeat并background-color动态更改每个项目的 。
Note that although all the items have a class called originalwith red background, that value is updated (override) with a new colour from the array.
请注意，尽管所有项目都有一个original以红色背景调用的类，但该值会使用数组中的新颜色进行更新（覆盖）。
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 contentone right ?!?"
所以现在你可能会想：“酷！如果我可以动态改变类的颜色属性，我应该能够对任何其他属性做同样的事情，就像那个一样，对content吧？！？”
The answer is "Yes & No".
答案是“是与否”。
It seems pseudo selectors like :afterand :beforeare treated differently.
似乎伪选择器喜欢:after并且:before被区别对待。
"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"
“虽然它们通过 CSS 被浏览器渲染，就好像它们就像其他真正的 DOM 元素一样，但伪元素本身并不是 DOM 的一部分，因此你不能直接使用 AngularJS、jQuery（或任何 JavaScript API）来选择和操作它们对于这个问题”
You can find a full explanation on this post: (https://stackoverflow.com/a/5041526/1310945)
您可以在这篇文章中找到完整的解释：（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).
已经说过，我相信您可以使用此解决方案（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.
附带说明一下，对于您尝试使用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>
回答by Romain
i write the solution which work for me:
我写了对我有用的解决方案：
Html Page
网页
<div class="list-group">
<a href ng-click="setSelectedLink('wiki')" ng-class="{active:isSelectedLink('wiki')}" class="list-group-item">Wiki</a>
<a href ng-click="setSelectedLink('tacheList')" ng-class="{active:isSelectedLink('tacheList')}" class="list-group-item">Link</a>
</div>
Inside your Controller of this html page: JS
在此 html 页面的控制器中：JS
$scope.tab = 'wiki';//by default the first is selected
$scope.setSelectedLink = function (tabId) {
$scope.tab = tabId;
console.log("setTab: "+tabId);
$location.path('/'+tabId);
}
$scope.isSelectedLink = function (tabId) {
return $scope.tab === tabId;
}
