I'm hopping this awesome community can steer me on the right direction. I came from the flash/flex/js world, and I like how simple it is to define an item renderer in flex. Here is what I'm trying to accomplish:
I have an Angular component which consist of a form and a html table. I have the columns, headers, rows, etc. all populating correctly using ng-repeat. I want to be able to define column "renderers", so if someone passes me a column property like "renderAs: 'button'" or "renderAs: 'progress'" I should be able to render the entire column as a button, or progress bar, etc.
Here is what I've tried so far:
- ng-bind-html="getColRenderer(column.renderAs, column.value)" which returns HTML based on 'renderAs'. As you all probably know, this will only work with basic HTML stuff, but I cannot append an 'ng-click', or an 'href' due to angular's security. So, I opted for something else.
- I semi-have a good solution embedding a "ng-switch" inside my ng-repeat. I had an ng-if but with several types of potential "renderers" I opted for the switch. This somehow seems like future problems while trying to display too many columns or rows, just my fears.
- Decorators - I like decorators, but it seemed a bit too much for something as a simple button that calls something on click or a progress bar with 2 values. So, I halted going into this path, but if this is the shinning path all walk, then by all means.
I hope someone out there has ran/done something like this and can steer me on the right course of action. If the ng-switch or ng-if is okay, then I'm good to go.
Once again, thank you in advanced.