在表格中的四列中显示角度数组值

时间:2016-05-16 10:00:59

标签: angularjs

我想在表格的四列中显示角度数组字符串值。 该数组的值如下:

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

但是上面的代码没有解决问题。怎么解决这个问题?

1 个答案:

答案 0 :(得分:1)

尝试这样。

&#13;
&#13;
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);
  });
&#13;
<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>
&#13;
&#13;
&#13;