How to add dynamic styles to many elements in Angular

Question

I have many many buttons in page and a input for user to enter color.

Is there a better way than below code?

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

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

Can we generate a dynamic class like below?

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

I assume you meant ng-model in your input (not ng-modal)? — sfletche
– sfletche, Commented Apr 24, 2015 at 4:17

sfletche · Accepted Answer · 2015-04-24 04:30:23Z

3

Try the following...

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

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

You can see a working example here.

edited Apr 24, 2015 at 4:30

answered Apr 24, 2015 at 4:21

sfletche

50.1k32 gold badges110 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anmol · Accepted Answer · 2015-04-24 05:02:30Z

0

Easy and simple solution

<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>

edited Apr 24, 2015 at 5:02

answered Apr 24, 2015 at 4:27

Anmol

614 bronze badges

Comments

Sachin Saluja · Accepted Answer · 2015-04-25 07:18:26Z

0

Found the solution, a directive to interpolate inside tag http://alexbaden.me/interpreting-data-binding-in-style-tags-with-angular/

answered Apr 25, 2015 at 7:18

Sachin Saluja

1

Collectives™ on Stack Overflow

How to add dynamic styles to many elements in Angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related