使用 AngularJS 动态更改 css 类的属性 [英] Dynamically change a css class' properties with AngularJS
本文介绍了使用 AngularJS 动态更改 css 类的属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我喜欢 bootstrap 示例的样子
.bs-docs-example {背景色:#FFFFFF；边框:1px 实心#DDDDDD；边框半径:4px 4px 4px 4px；...}.bs-docs-example:after {背景色:#F5F5F5；边框:1px 实心#DDDDDD；边框半径:4px 0 4px 0；颜色:#9DA0A4；内容:标题"；...} 但我需要动态更改.bs-docs-example:after中的内容像这样:
<div class="bs-docs-example" ng-style="content:'{{ title }}';"ng-repeat="标题中的标题">这有可能吗?怎么样?
解决方案
其实我找到了一个不涉及 :after 的解决方案(我在 CSS 方面很糟糕，我没有早点考虑......)我也学习了一些 CSS.这是:
.bs-docs-example {背景色:#FFFFFF；边框:1px 实心#DDDDDD；边框半径:4px 4px 4px 4px；...}.bs-docs-example-title {背景色:#F5F5F5；边框:1px 实心#DDDDDD；边框半径:4px 0 4px 0；颜色:#9DA0A4；内容:标题"；...} 并像这样使用它:
<div class="bs-docs-example" ng-repeat="title in titles"><span class="bs-docs-example-title">{{ title }}</span>希望对您有所帮助.
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?
解决方案
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 :
<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.
这篇关于使用 AngularJS 动态更改 css 类的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
