Rom*_*ain 9 css twitter-bootstrap angularjs
我喜欢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";
...
}
但我需要改变内容的.BS-文档,例如:后动态就象这样:
<html>
<div class="bs-docs-example" ng-style="content:'{{ title }}';"
ng-repeat="title in titles">
这可能吗？怎么样？
Vin*_*nce 14
我使用ng-bind-html做了类似的事情,我对内容缺乏控制,所以我修改了一个后来会处理它的类
var somecolorvar = "#F00";
$scope.mystyles = ".something:after { color: " + somecolorvar + "; }";
<style ng-bind-html="mystyles"></style>
然后你会得到这样的东西
<style>.something:after { color: #F00; }</style>
编辑:你也可以通过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>
你会看到类似的东西:
this is - Value 123
this be - Value 456
您可以使用ng-styleAngularJS动态更改CSS类属性.
请参阅下面的代码或此插件(http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview)
我创建了一个颜色数组供动态使用ng-repeat并更改background-color每个项目.
请注意,尽管所有项目都有一个名为original红色背景的类,但该值会使用阵列中的新颜色进行更新(覆盖).
所以现在你可能会想:" 酷!如果我可以动态改变类颜色属性,我应该能够对任何其他属性做同样的事情,比如content右边的那个？! "
答案是" 是和否 ".
似乎伪选择器喜欢:after和:before被区别对待.
"虽然它们是由浏览器通过CSS呈现的,就好像它们就像其他真正的DOM元素一样,但伪元素本身不是DOM的一部分,因此您无法使用AngularJS,jQuery(或任何JavaScript API)直接选择和操作它们对于这个问题"
你可以在这篇文章中找到完整的解释:(/sf/answers/352906851/)
已经说过,我相信你可以使用这个解决方案(/sf/answers/1155508511/)来解决这个问题.
我还没有尝试过 - 但我可能会再做一次只是为了好玩.
另外,也许有一个更好的解决方案(以及更多的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>
实际上我找到了一个不涉及 :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";
...
}
并像这样使用它：
<html>
<div class="bs-docs-example" ng-repeat="title in titles">
<span class="bs-docs-example-title">{{ title }}</span>
</div>
我希望这有帮助。
| 归档时间： |
|
| 查看次数： |
42636 次 |
| 最近记录： |