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

    效果:

  • 相关阅读:
    Java HashMap 和 ConcurrentHashMap
    递归算法应用
    二叉树基础知识
    自动删除qq空间说说
    移动APP测试的22条军规--笔记
    SQL Server数据库状态监控
    SqlSugar-事务操作
    详解第一范式、第二范式、第三范式、BCNF范式
    SQL 日期
    2019年世界各国gdp排名对比
  • 原文地址:https://www.cnblogs.com/koto/p/7941166.html
Copyright © 2011-2022 走看看