2017-02-02 1 views
1

私が持っているように、いくつかのデータ配列:AngularJSはNGリピートダイナミックROWSPAN

LIKE THIS

しかし、にbrothers.name制限を示すための私のTD:私のような表を作成したい

arr = [ 

{"name": "John", "age": 17, "brothers":[{"name":"steve"},{"name":"james"},"name":"robert","name":"juzu"], 
{"name": "Doe", "age": 18, "brothers":[{"name":"kelly"},{"name":"smith"}, "name":"herry"], 
{"name": "John Doe", "age": 19, "brothers":[{"name":"old"},{"name":"sch"}, {"name":"Jee"},{"name":"hero"},{"name":"tony"}], 

]; 

2. と私のborthers.nameデータ> 2ならば、私のarr.nameはあなたが数学演算を使用することができ、データの変更なし1

+0

まだ試しましたか? –

+0

'rowspan =" {{somevar.brothers.length}} "' – YOU

+0

はい、持っています。私のテーブルは何も表示していません。 –

答えて

1

を追加しますが、TR ROWSPAN各親データのためのモーダルまたは内部テーブルのようなデータを表示するには、y別の方法:http://fiddle.jshell.net/c47xK/114/

HTML

<div ng-controller="MyCtrl"> 
    <table class="table table-bordered table-striped"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th colspan="2">Brothers</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr style="display: none" ng-repeat-start="(k1, v1) in data"></tr> 
      <tr> 
       <td rowspan="{{ Math.ceil(v1.brothers.length/2) }}">{{v1.name}}</td> 
       <td>{{v1.brothers[0].name }}</td> 
       <td>{{v1.brothers[1].name }}</td> 
      </tr> 
      <tr ng-repeat="(k2, v2) in calcData(v1.brothers)"> 
       <td>{{v1.brothers[v2].name || '' }}</td> 
       <td>{{v1.brothers[v2+1].name || ''}}</td> 
      </tr> 
      <tr style="display: none" ng-repeat-end></tr> 
     </tbody> 
    </table> 
</div> 

はJavaScript

angular.module('App', []); 
angular.module('App').controller('MyCtrl', function($scope) { 
    $scope.Math = window.Math; 
    $scope.data = [{ 
     "name": "John", 
     "age": 17, 
     "brothers": [{ "name": "steve" }, { "name": "james" }, { "name": "robert" }, { "name": "juzu" }] 
    }, { 
     "name": "Doe", 
     "age": 18, 
     "brothers": [{ "name": "kelly" }, { "name": "smith" }, { "name": "herry" }] 
    }, { 
     "name": "John Doe", 
     "age": 19, 
     "brothers": [{ "name": "old" }, { "name": "sch" }, { "name": "Jee" }, { "name": "hero" }, { "name": "tony" }] 
    } 
    ]; 
    $scope.calcData = function (data) { 
     var tempData = angular.copy(data); 
     var temp = []; 
     for (var i = 0; i <= Math.ceil(tempData.slice(2, data.length).length/2); i++) { 
      if (i%2==0) { 
       temp.push(i+2) 
      } 
     } 
     return temp; 
    } 
}); 

出力

enter image description here