angularjs - Angular JS: Handling different UI components from each views repeated using ng-repeat when the view look-feel are same -

apologies big title, couldn't come thing better. let me explain issue having.

i have render 3 cards each of them share same look-feel, means each of them have header section , body section. using ng-repeat data model , 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. example, 1 card's body might have chart using hight charts, 1 might want use ui jquery ui library, etc..

how achieve when looping using ng-repeat? let me know if starting direction correct?

the model data 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 on this.

thank you.

i'm newer angular, believe encapsulate of through directive. idea would have our own directive add div , pass in type , there directive handle logic , create appropriate chart/element/whatever , creation in javascript file directive.

<div chart="line-graph"></div> <div chart="bar-chart"></div>  module.directive('chart', function(){   return{     //logic build various charts different libraries here   } }); 

it might pretty complicated directive write, elegant way write it. @ganaraj did have above div graph="widget.data" inside of ng-switch, didn't mention directive part, switching. make individual directives simpler, may better overall approach, if each type going vastly different.

this post below simpulton covering directives portion of it. can make step further , make more widget tag (his "act five: widget directive") , pass in type , data go it. writing directive animantion on cirlces created in css, there's no reason couldn't use apply highchart or jquery ui code. it's written , includes code in jsfiddle can see work well.

http://onehungrymind.com/angularjs-directives-basics/