Apologies for the big Title, I couldn't come up with any thing better. Let me explain the issue I am having.
I have to render three cards where each of them share same look-feel, means each of them have a header section and a body section. I am using ng-repeat to get data from model and render these cards.
Code:
<div class="card">
<a href="#/cards/{{card.id}}"><h1>{{card.title}}</h1></a>
<div ng-repeat="widget in card.widgets" class="widget">
<h2>{{widget.title}}</h2>
{{widget.type}}
</div>
</div>
Now, each of these Card's body should have different UI in it. For example, One card's body might have a chart using Hight Charts, Another one might just want to use a UI from jQuery UI library, etc..
How would I achieve it when I am looping using ng-repeat? Let me know if my starting direction is correct?
The model data look like this:
[
{
"id": "c001",
"title": "CARD 1",
"widgets": [
{
"title": "title 1.1",
"type": "line-graph"
},
{
"title": "title 1.2",
"type": "bar-chart"
}
]
},
{
"id": "c002",
"title": "CARD 2",
"widgets": [
{
"title": "title 2.1",
"type": "graph"
},
{
"title": "title 2.2",
"type": "bar-chart"
}
]
},
{
"id": "c003",
"title": "CARD 3",
"widgets": [
{
"title": "title 3.1",
"type": "line-graph"
},
{
"title": "title 3.1",
"type": "bar-chart"
}
]
}
]
Looking for help on this.
Thank You.
The solution for your problem is to combine both ng-switch and ng-repeat to achieve the effect you are attempting to get. Basically you would repeat over the items and switch between its type. Angular only includes the part of the DOM which matches the switch.
Here is a rough idea / html of what you should be doing.
<div class="card">
<a href="#/cards/{{card.id}}"><h1>{{card.title}}</h1></a>
<div ng-repeat="widget in card.widgets" class="widget">
<h2>{{widget.title}}</h2>
<div ng-switch on="widget.type">
<div ng-switch-when="line-graph">
<!--do something here relevant to line graph-->
<div line-graph="widget.data"></div>
</div>
<div ng-switch-when="graph">
<!--do something here relevant to graph-->
<div graph="widget.data"></div>
</div>
<!-- and so on... add more if you need-->
</div>
</div>
</div>
I'm newer to Angular, but I believe you could encapsulate all of it through a directive. The idea would be we would have our own directive that we add to a div and then pass in the type and from there the directive could handle the logic and create the appropriate chart/element/whatever and do all the creation in the javascript file for the directive.
<div chart="line-graph"></div>
<div chart="bar-chart"></div>
module.directive('chart', function(){
return{
//logic to build various charts with different libraries here
}
});
It might be a pretty complicated directive to write, but it would be an elegant way to write it. @ganaraj did have that above with div graph="widget.data" inside of the ng-switch, but didn't really mention the directive part, just the switching. That would make the individual directives simpler, so may be the better overall approach, if each type is going to be vastly different.
This post below from simpulton is really good covering the directives portion of it. You can even make it a step further and make it more like a widget where the tag could be (his "act five: widget directive") and then to that pass in the type and the data to go with it. He is writing a directive to do animantion on some cirlces created in CSS, so there's no reason you couldn't use it to apply some highchart or jQuery UI code. It's really well written and includes code in jsfiddle so you can see it work as well.