zoukankan      html  css  js  c++  java
  • 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:''}
                            ]}
                        ];

    效果:

  • 相关阅读:
    Centos7下安装pip
    Docker进入容器后使用ifconfig等命令“command not found”解决办法
    安装包安装npm
    grafna与饼状图
    Postgresql导出数据报版本不对
    添加动物欢迎语
    zabbix性能优化记
    CPU使用情况之平均负载
    centos7以rpm方法装mysql5.7及大坑
    光速搭lvs + keepalived + nginx
  • 原文地址:https://www.cnblogs.com/koto/p/7941166.html
Copyright © 2011-2022 走看看