Отображение угловых значений массива в строке из четырех столбцов в таблице

Question

Я хочу отобразить строки строки углового массива в строке из четырех столбцов в таблице. Массив имеет значения, как:

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

Я хочу, чтобы отобразить его в таблице из четырех столбцов, так что таблица должна выглядеть так:

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

Мой код контроллера:

$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}; 

Мой html-код:

<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> 

Но выше код не решает проблему. Как решить это?

Answer 1

попробуйте вот так.

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>