Question

页面上有很多按钮，输入用户输入颜色。

有比下面代码更好的方法吗？

<button ng-style="myStyles">
<button ng-style="myStyles">
.....
....

<input type="text" ng-modal="myStyles.color">

我们可以生成如下的动态类吗？

<style>
 button {
     color : {{myStyles.color}}
 }
</style>

Answer 1

尝试以下方法......

<button ng-class="{color: myStyles.color}">   

<input type="text" ng-model="myStyles.color">

您可以看到一个有效的例子here。

Answer 2

简单易用的解决方案

<html>
<div id="a1">
<button>button 1</button><br/>
<button>button 2</button><br/>
<button>button 3</button><br/>
<input type="text" onkeyup="Fn1()" id="data" />
</div>
<script type="text/javascript">
function Fn1(){
    var z = document.getElementById("data").value;
    var x = document.getElementById("a1");
    var y = x.getElementsByTagName('button');   
    for(var i = 0;i<y.length;i++)
        {   
            y[i].style.color=z;

        }
}
</script>

</html>

Answer 3

找到解决方案，一个插入内部标签的指令 http://alexbaden.me/interpreting-data-binding-in-style-tags-with-angular/

如何在Angular中为许多元素添加动态样式

3 个答案: