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

回答

相關問題