angularjs表采用NG-重复

我试图绘制一个表，每列内嵌套行的多个阵列：angularjs表采用NG-重复

SET1部件1 element2的元素3元素4元素5 ... element10（数组1）
部件1 element2的元素3元素4元素5 ... element10（数组2）
部件1 element2的元素3元素4元素5 ... element10（ARRAY3）
部件1 element2的元素3元素4元素5 ... element10（array4）
部件1 element2的element3 element4 element5 ... element10（array5）

Set2 element11 element12 el ement13络element15 ... element20（数组1）
element11 element12 element13 element14的element15 ... element20（数组2）
element11 element12 element13 element14的element15 ... element20（ARRAY3）
element11 element12 element13 element14的element15 ... element20（array4）
element11 element12 element13 element14 element15 ... element20（array5）
。。。
SetN

有人可以帮助用ng-repeat来实现这一点，每个数组中只有10个条目在单个集合中。

我试着写这样的代码：

<table class="table table-bordered"> 
    <thead> 
    <tr> 
     <th class="info" colspan="3">Combo</th> 
     <th class="info" colspan="10">Repititions</th> 
    </tr> 
    <tr border="1 px solid black"> 
     <th class="info" colspan="3">{{repitition_length.length}} Shots</th> 
     <th class="info">1</th> 
     <th class="info">2</th> 
     <th class="info">3</th> 
     <th class="info">4</th> 
     <th class="info">5</th> 
     <th class="info">6</th> 
     <th class="info">7</th> 
     <th class="info">8</th> 
     <th class="info">9</th> 
     <th class="info">10</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td colspan="3">Set {{i+1}}</td> 
     <td> 
     <tr ng-repeat="i in array" ng-init="index = i*10"> 
      <td ng-repeat="one in color_with_mushin.slice(index,index+10)" bgcolor={{one.color}}>{{one.value}}</td> 
     </tr> 
     <tr ng-repeat="i in array" ng-init="index = i*10"> 
      <td ng-repeat="one in color_with_quite_eye_percentage.slice(index,index+10)" bgcolor={{one.color}}> 
      {{one.value}} 
      </td> 
     </tr> 
     <tr ng-repeat="i in array" ng-init="index = i*10"> 
      <td ng-repeat="one in color_with_quite_eye_counter.slice(index,index+10)" bgcolor={{one.color}}> 
      {{one.value}} 
      </td> 
     </tr> 
     <tr ng-repeat="i in array" ng-init="index = i*10"> 
      <td ng-repeat="one in color_with_rep_score.slice(index,index+10)" bgcolor={{one.color}}>{{one.value}}</td> 
     </tr> 
     <tr ng-repeat="i in array" ng-init="index = i*10"> 
      <td ng-repeat="one in color_with_grand_total.slice(index,index+10)" bgcolor={{one.color}}>{{one.value}}</td> 
     </tr> 
     </td> 
    </tr> 
    </tbody> 
</table>

在控制器我已经定义了$ scode.index和$范围。数组：

$scope.index = 0; 
$scope.array = []; 
for(var i=0; i<$scope.color_with_mushin.length/10;i++)               
{ 
    $scope.array.push(i); 
}

什么我得到的输出是：

我要的是第一排，每个阵列的十个条目，然后在第二行未来所有阵列的十个条目等。

来源

2017-07-31 Amarpreet Jethra

到目前为止您尝试了什么？你能发布你的角码来看看有什么问题吗？ – rrd

@rrd我已经编辑了这个问题，你能否请你提出一个很长时间以来我被困住的代码有什么问题。 –

由于内部有，所以您的表格代码需要一些工作，但是如果有机会，我们会仔细查看。 – rrd

由于您使用的片，我假设你的数据存储在一些连续阵列。

我更喜欢直接使用数据对象，所以我会采用这种方法。

$scope.sets = []; 

$scope.color_with_mushin.forEach(function(item, i) { 
    var set = Math.floor(i/10); 

    if (!$scope.sets[set]) { 
     $scope.sets[set] = new Array(5); 
    } 

    item.type = "color_with_mushin"; 
    $scope.sets[set][0].push(item); 
}); 

// repeat for each data array, or you can refactor the code and make use of a predefined source array like 

var sources = ["color_with_mushin", "color_with_quite_eye_percentage", ...] 

<div ng-repeat="set in sets"> 
    <div>Set {{$index + 1}}</div> 
    <table> 
     <tr ng-repeat="row in set"> 
      <td ng-repeat="data in row" bgcolor={{data.color}}>{{data.value}}</td> 
     </tr> 
    </table> 
</div>

来源

2017-08-01 03:30:39 Icycool

angularjs表采用NG-重复

回答

相关问题