How to format table dynamically within ng-repeat in AngularJS

Question

I have a list of items of different types and I would like to display them in a table. The items of one type will have two columns and items of another type just one. Any suggestions how to change conditionally the colspan on the <> tag on fly?

 <div ng-init="items = [
    {name:'item1', old:1, new:2}, 
    {name:'item2', old:2, new:2},
    {name:'item3', msg: 'message'},
    {name:'item4', old:0, new:2}
  ]">
  <table border=1>    
    <tr  ng-repeat="item in items" >                   
     <th>{{item.name}}</th>
     <td>{{item.old}}</td>  
     <td colspan='2'>{{item.msg}}</td>     
     <td>{{item.new}}</td>      
    </tr>              
 </table>

Here is the example to play in jsfiddle: http://jsfiddle.net/38LXt/1/

Thanks!

Your question is unclear. I dont see a type field in the items. What is your expected result? — AlwaysALearner
– AlwaysALearner, Commented Sep 6, 2013 at 8:01

Scalpweb · Accepted Answer · 2013-09-06 07:57:58Z

3

You can use conditional directives, such as ng-show, to do something like this:

<table border=1>    
   <tr  ng-repeat="item in items" >                   
      <th>{{item.name}}</th>
      <td>{{item.old}}</td>  
      <td colspan="2" ng-show="item.type == 'typeA'">{{item.msg}}</td>
      <td ng-show="item.type == 'typeB'">{{item.msgB1}}</td>     
      <td ng-show="item.type == 'typeB'">{{item.msgB2}}</td>          
      <td>{{item.new}}</td>      
   </tr>              
</table>

More info about ng-show:

ngShow directive

answered Sep 6, 2013 at 7:57

Scalpweb

1,9711 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chandermani Over a year ago

For completeness ng-if too.

Scalpweb Over a year ago

Can you please mark my answer as valid please, to close the subject ?

Collectives™ on Stack Overflow

How to format table dynamically within ng-repeat in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related