Display angular array values in a row of four column in a table

Question

I want to display the angular array string values in row of four columns in a table. The array has values like:

["str1", "str2", "str3","str4","str5","str6","str7","str8" and so on]

I want to display it in table of four columns such that the table should look like :

col1    col2   col3   col4
--------------------------
str1    str2   str3   str4
str5    str6   str7   str8

My controller code:

$scope.output=["str1", "str2", "str3","str4","str5","str6","str7","str8" ....]   
var one=[];
var two=[];
var three=[];
var four=[];

for( var i=1; i<=$scope.output.length ;i++)
{
 if((i)%4==0){
 one.push($scope.output[i]);
 }
 else if((i)%4==1)
{ two.push($scope.output[i]);}

}
else if((i)%4==2)
{ three.push($scope.output[i]);}

 }
  else if((i)%4==3)
{ four.push($scope.output[i]);}

 }

 $scope.output = {one: one , two: two , three : three , four :four};

My html code :

<table>
  <tr ng-repeat="one in output.one track by $index" >

          <td><div>{{one}}</div></td>
          <td><div>{{output.two[$index]}}</div></td> 
          td><div>{{output.three[$index]}}</div></td>
          <td><div>{{output.four[$index]}}</div></td> 

     </tr>
 </table>

But above code not solving the problem.How to solve this?

Have you looked at stackoverflow.com/questions/8495687/split-array-into-chunks? — Parthasarathy
– Parthasarathy, Commented May 16, 2016 at 10:16

Hadi · Accepted Answer · 2016-05-16 10:21:43Z

1

try like this.

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
  
  $scope.index = 0;
   $scope.items =["str1", "str2", "str3","str4","str5","str6","str7","str8","str9","str10"];
   $scope.array = [];
  for(var i=0; i<$scope.items.length/4;i++)
    $scope.array.push(i);
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   
  <table>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
      <td>Col4</td>
      </tr>
     <tr ng-repeat="i in array"  ng-init="index = i*4">
       
         <td ng-repeat="one in items.slice(index,index+4)">{{one}}</td>
     </tr>
 </table>
  
</div>

answered May 16, 2016 at 10:21

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

3 Comments

Nikhil Vaghela Over a year ago

nice ans i think this is perfect

Hadi Over a year ago

did you see my answer?

Nikhil Vaghela Over a year ago

ya i see nice logic, that's way i up-word you

Collectives™ on Stack Overflow

Display angular array values in a row of four column in a table

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related