码迷,mamicode.com
首页 > Web开发 > 详细

angularjs 合并单元格

时间:2018-03-26 10:47:57      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:代码   bar   tool   ===   price   分享图片   效果   src   inf   

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 合并单元格

标签:代码   bar   tool   ===   price   分享图片   效果   src   inf   

原文地址:https://www.cnblogs.com/fengxiaoliu/p/8648975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!