Displaying Angular Variable Values in Table in a Column of Three Values

Question

I have an Angular variable which has values in the form of an array as [ 170,1,130,3,134,4.... and so on]. I want to display it in Tabular form such that the values appear in the table in three columns for eg. first three values in first three columns of the first row, next three values in columns of the second row and so on.

col1   col2   col3
 170   1     130
 3     134    4
 ................
 ................

My Code

<span  ng-repeat="obj in items">
<div ng-switch on="{{obj%3}}"> 
   <div ng-switch-when="0">{{obj}}</div>
   <div ng-switch-when="1">{{obj}}</div>
   <div ng-switch-when="2">{{obj}}</div>
</div>

But this code is not working. Any suggestion would be useful.

Thanks in advance.

This won't work at all the way you intend. the <span> is repeated for each obj. What you will end up with is a series of <span> elements, each containing a <div> holding another <div> inside, but it won't have any effect on their layout on the page. — Claies
– Claies, Commented Apr 25, 2016 at 11:24

antoinestv · Accepted Answer · 2016-04-25 11:22:53Z

1

Firstly, you can use ng-switch over the $index property of the isolated scope created by ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat).

Secondly, ng-switch is working with expressions, do not use brackets {{}} (https://docs.angularjs.org/api/ng/directive/ngSwitch).

Example:

<span  ng-repeat="obj in items">
    <div ng-switch on="$index % 3"> 
       <div ng-switch-when="0">{{obj}}</div>
       <div ng-switch-when="1">{{obj}}</div>
       <div ng-switch-when="2">{{obj}}</div>
    </div>
</span>

answered Apr 25, 2016 at 11:22

antoinestv

3,3062 gold badges25 silver badges39 bronze badges

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

Comments

Syam Pillai · Accepted Answer · 2016-04-25 11:25:17Z

0

Change your code into

<div class="container"> 
  <div flex="30">Col-1</div>
  <div flex="30">Col-2</div>
  <div flex="30">Col-3</div>
</div>
<div class="container"> 
  <div flex="30" ng-repeat="obj in items">{{obj}}</div>
</div>

add style for .container

.container{
  display: flex;
  flex-wrap: wrap;
}

answered Apr 25, 2016 at 11:25

Syam Pillai

5,2202 gold badges31 silver badges43 bronze badges

1 Comment

abhishek Over a year ago

This approach is not working. Columns are appearing in one below other . Any other styling required here ?

Collectives™ on Stack Overflow

Displaying Angular Variable Values in Table in a Column of Three Values

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related