CODEWITHSUNDEEP
angularjs
abhishek
abhishek

Reputation: 13

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

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?

Upvotes: 1

Views: 3262

Answers (1)

Hadi
Hadi

Reputation: 17299

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>

Upvotes: 1

Related Questions