AngularJS ng-repeat-start ng-repeat-end with table and rowspan

我在使用动态rowspan创建动态表时遇到了问题。我的json是一个对象数组。元素对象也是数组。元素数组应该作为动态rowspan的否。我有一个JSON，如：AngularJS ng-repeat-start ng-repeat-end with table and rowspan

{ 
    "roleTypes": [ 
    { 
     "roleType": { 
     "name": "SOA Role" 
     }, 
     "rates": [ 
     { 
      "rateType": { 
      "name": "new Rate" 
      }, 
      "hourlyRate": { 
      "value": 1222 
      }, 
      "internalRate": { 
      "value": 433 
      } 
     }, 
     { 
      "rateType": { 
      "name": "myRate" 
      }, 
      "hourlyRate": { 
      "value": 1350 
      }, 
      "internalRate": { 
      "value": 1650 
      } 
     } 
     ] 
    }, 
    { 
     "roleType": { 
     "name": "SOA Role" 
     }, 
     "rates": [ 
     { 
      "rateType": { 
      "name": "new Rate" 
      }, 
      "hourlyRate": { 
      "value": 1222 
      }, 
      "internalRate": { 
      "value": 433 
      } 
     }, 
     { 
      "rateType": { 
      "name": "myRate" 
      }, 
      "hourlyRate": { 
      "value": 1350 
      }, 
      "internalRate": { 
      "value": 1650 
      } 
     } 
     ] 
    }, 
    { 
     "roleType": { 
     "name": "AngularJs Developer" 
     } 
    } 
    ] 
}

如果我想使用NG-重复启动和NG-重复结束，并进行表结构像下面

：

roleType------  | rateType-----hourlyRate--------internalRate 
--------------------------------------------------------------------------- 
        | new Rate  1222    433 
        --------------------------------------------------- 
SOA Role   | myRate  1350    1650 
--------------------------------------------------------------------------- 
        | new Rate  1222     433 
        --------------------------------------------------- 
AngularJs Developer |myRate   1350     1650 
---------------------------------------------------------------------------

我挣扎着爬动态的rowspan。请检查是否有人可以帮忙。

来源

2016-08-19 Rakesh Lochan Sarma

这是无效的JSON。你可以请张贴正确的吗？ –

什么潘卡提的是正确的，但我认为你需要在rowspan更加动态的表格。你可以不喜欢如下面的例子：

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope) { 
 

 
    $scope.data = { 
 
    "roleTypes": [{ 
 
     "roleType": { 
 
     "name": "SOA Role" 
 
     }, 
 
     "rates": [{ 
 
     "rateType": { 
 
      "name": "new Rate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 1222 
 
     }, 
 
     "internalRate": { 
 
      "value": 433 
 
     } 
 
     }, { 
 
     "rateType": { 
 
      "name": "myRate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 1350 
 
     }, 
 
     "internalRate": { 
 
      "value": 1650 
 
     } 
 
     }] 
 
    }, { 
 
     "roleType": { 
 
     "name": "AngularJs Developer" 
 
     }, 
 
     "rates": [{ 
 
     "rateType": { 
 
      "name": "new Rate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 123 
 
     }, 
 
     "internalRate": { 
 
      "value": 1431 
 
     } 
 
     }, { 
 
     "rateType": { 
 
      "name": "myRate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 443 
 
     }, 
 
     "internalRate": { 
 
      "value": 1930 
 
     } 
 
     }, { 
 
     "rateType": { 
 
      "name": "otherRate" 
 
     }, 
 
     "hourlyRate": { 
 
      "value": 343 
 
     }, 
 
     "internalRate": { 
 
      "value": 2000 
 
     } 
 
     }] 
 
    }] 
 
    }; 
 
});

td[rowspan] { 
 
    vertical-align: middle !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<div ng-app="sa" ng-controller="FooController"> 
 
    <table class="table table-bordered"> 
 
    <thead> 
 
     <tr> 
 
     <th>roleType</th> 
 
     <th>rateType</th> 
 
     <th>hourlyRate</th> 
 
     <th>internalRate</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr ng-repeat-start="role in data.roleTypes"> 
 
     <td rowspan="{{role.rates.length}}">{{role.roleType.name}}</td> 
 
     <!-- Display the first rate in the same "tr" --> 
 
     <td>{{role.rates[0].rateType.name}}</td> 
 
     <td>{{role.rates[0].hourlyRate.value}}</td> 
 
     <td>{{role.rates[0].internalRate.value}}</td> 
 
     </tr> 
 
     
 
     <!-- Now display the other rates in different "tr" excluding first --> 
 
     <!-- You can also make a subarray from here excluding the 1st rate --> 
 
     <tr ng-repeat="rate in role.rates" ng-if="!$first" ng-repeat-end> 
 
     <td> 
 
      {{rate.rateType.name}} 
 
     </td> 
 
     <td> 
 
      {{rate.hourlyRate.value}} 
 
     </td> 
 
     <td> 
 
      {{rate.internalRate.value}} 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

来源

2016-08-19 12:32:17

真棒@shashank ...它的作品谢谢:) –

您可以通过有做类似下面ng-repeat超过tbody

<table> 
    <tbody ng-repeat="role in roleTypes.roleTypes"> 
    <tr ng-repeat="rate in role.rates"> 
     <td ng-if="$first" rowspan="2">{{role.roleType.name}}</td> 
     <td>{{rate.rateType.name}}</td> 
     <td>{{rate.hourlyRate.value}}</td> 
     <td>{{rate.internalRate.value}}</td> 
     <tr> 
    </tbody> 
</table>

Plunkr

来源

2016-08-19 11:57:22

AngularJS ng-repeat-start ng-repeat-end with table and rowspan

回答

相关问题