Mr. B. Mr. B. - 1 month ago 8
AngularJS Question

AngularJS + CSS: best practice for a live preview?

I've a textfield with a hex-color as it's value. I'd like to display the impact live, e.g. by changing the body's background-color.

The code works but feels wrong/dirty. I'd like to avoid jQuery's

.css()
and follow the angular principles.

<div data-ng-app>
<span data-ng-init="colors.bg='#00FF00';"/>

<style type="text/css">
body {
background: {{colors.bg}}; <!-- dirty ?! -->
}
</style>

<input type="text" data-ng-model="colors.bg"/>
</div>


Does anyone know a good/clean solution? Thanks in advance!

Answer

You could use a change event on your input and use an ng-style on your body tag