• angularjs 合并单元格


    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:''}
                            ]}
                        ];

    效果:

  • 相关阅读:
    python的sorted相关
    dict两种遍历方法
    python 深拷贝和浅拷贝浅析
    牛人总结python中string模块各属性以及函数的用法,果断转了,好东西
    Python二分查找
    堆和栈区别
    一次完整的HTTP事务是怎样一个过程?(转)
    ------shell学习
    BZOJ1025 [SCOI2009]游戏
    BZOJ1024 [SCOI2009]生日快乐
  • 原文地址:https://www.cnblogs.com/koto/p/7941166.html
Copyright © 2020-2023  润新知