Creating a dynamic form to manipulate CSS properties in real time has been my latest project. I've managed to define the CSS property names and values within an object, but now I'm struggling to style the item elegantly on the page as the user interacts with the form.
You can check out the working example here.
Here's a snippet of the object I'm currently working with:
vm.card = [
{
class: "card",
properties: [
{
name: "background-color",
value: "#FFFFFF"
},
{
name: "border",
value: "1px solid #FFFFFF"
},
// more properties...
]
}
];
In my HTML code, I'm utilizing ng-repeat to generate form controls dynamically:
<div ng-repeat="card in vm.card">
<b>{{card.class}}</b>
<div ng-repeat="object in card.properties">
<label>{{object.name}}</label>
<input type="text" ng-model="object.value" />
</div>
</div>
The current display of the item isn't as flexible and reusable as I'd like. I want to find a way to incorporate ng-repeat within ng-style to dynamically pull in the CSS properties from the object.
If you have any suggestions or tips on how to achieve this, please let me know!