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?