Menu
I'm trying to use angular js bindings within a style element yet it doesn't seem to work. Is this a bug and is there a better way to do this?
<style ng-repeat="test in styles">
.test {
background-color: {{ test.backgroundColor }};
display: {{ test.display }};
width: {{ test.width }};
height: {{ test.height }};
}
</style>
http://jsfiddle.net/cmsanche/PpyVn/
789
I don't think Angular parses style elements. You probably want to use the ngStyle directive:
http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngStyle
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
</head>
<body>
<div ng-init="styles=[{backgroundColor: 'red', width:'100px', height: '100px', display: 'block'}]">
<div ng-repeat="test in styles" ng-style="test">
.test {
background-color: {{ test.backgroundColor }};
display: {{ test.display }};
width: {{ test.width }};
height: {{ test.height }};
}
</div>
</html>
Plunker (like jsFiddle, but more Angular-friendly) Demo
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
