angularjs 合並單元格
阿新 • • 發佈:2018-03-26
AR toolbar post scope lis img image r.js con
Html:
<table class="table table-striped"> <thead> <tr> <th>國家</th> <th>價格(EUR)</th> <th>價格(CNY)</th> <th>備註</th> </tr> </thead> <tbody ng-repeat="x in tableData"> <tr ng-repeat="y in x.list"> <td ng-if="$index === 0" rowspan={{x.list.length}}>{{x.cnName}}</td> <td>{{y.eurPrice}}</td> <td>{{y.cnPrice}}</td> <td>{{y.remark}}</td> </tbody> </table>
controller.js
$scope.tableData = [ {cnName:‘aaa‘,list:[ {cnPrice: ‘0.22‘,euroPrice:‘0.141‘,remark:‘‘}, {cnPrice: ‘0.14‘,euroPrice:‘0.141‘,remark:‘aa‘}, {cnPrice: ‘0.35‘,euroPrice:‘0.171‘,remark:‘c‘}, {cnPrice: ‘0.67‘,euroPrice:‘0.51‘,remark:‘v‘} ]}, {cnName:‘bbb‘,list:[ {cnPrice: ‘0.22‘,euroPrice:‘0.141‘,remark:‘‘}, {cnPrice: ‘0.45‘,euroPrice:‘0.171‘,remark:‘c‘}, {cnPrice: ‘0.67‘,euroPrice:‘0.51‘,remark:‘v‘} ]}, {cnName:‘ccc‘,list:[ {cnPrice: ‘0.22‘,euroPrice:‘0.141‘,remark:‘‘}, {cnPrice: ‘0.13‘,euroPrice:‘0.141‘,remark:‘aa‘}, {cnPrice: ‘0.35‘,euroPrice:‘0.171‘,remark:‘‘}, {cnPrice: ‘0.35‘,euroPrice:‘0.171‘,remark:‘‘}, {cnPrice: ‘0.67‘,euroPrice:‘0.51‘,remark:‘‘} ]} ];
效果:
angularjs 合並單元格