下载表格以使用 ng-repeat 隐藏行答案

【问题标题】：Download Table to excel With hidden rows with ng-repeat下载表格以使用 ng-repeat 隐藏行
【发布时间】：2016-05-09 08:39:42
【问题描述】：

我有一个使用 ng-repeat 创建的表。在这个表中，我使用了 ng-repeat-start 和 ng-repeat-end 来隐藏一些只有在用户想要看到它时才可见的行。现在我的问题是，当我尝试将此表导出到 Excel 时，可见的行仅出现在 excel 中，因为有些相互链接的行显示为不同的行（在表中它们也是不同的行）。现在我想要的是所有可见或不可见的行都应该出现在excel中。有没有一种方法可以使相互链接的两行（因为它们包含与单个实例相关的数据）可以在 Excel 中显示为单行。这是我的代码

function myCtrl($scope) {
    $scope.exportData = function () {
        var table = document.getElementById('exportable');
        var html = table.outerHTML;
        window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
   };

    $scope.items = [{
        "Name": "Name1",
            "Date": "10/02/2014",
            "Terms": ["samsung", "nokia", "apple"]
    }, {
        "Name": "Name2",
            "Date": "10/02/2014",
            "Terms": ["motrolla", "nokia", "iPhone"]
    }]
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<div ng-controller="myCtrl">
    <button ng-click="exportData()" >Export</button>
    <br />
    <table width="100%" id='exportable'>
            <thead>
                <tr >
                    <th></th>
                    <th>Name</th>
                    <th>Date</th>
                    <th>Terms</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat-start="item in items">
                    <td>{{item.Name}}</td>
                    <td>{{item.Date}}</td>
                    <td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
                    <td>
                      <button ng-click="item.expanded=true">
                      more
                      </button>
                    </td>
                </tr>
                <tr ng-repeat-end ng-if="item.expanded">
                  <td colspan=''>
                    
                  </td>
                  <td colspan=''>
                    Hello
                  </td>
                  <td >
                    <button ng-click="item.expanded=false">
                      Hide
                      </button>
                  </td>
                </tr>
            </tbody>
        </table>
    
</div>
  </body>

这里是Fiddle 任何帮助将不胜感激谢谢。

【问题讨论】：

标签： javascript jquery angularjs export-to-excel ng-repeat

【解决方案1】：

使用ng-show insted of ng-if fiddle

<tr ng-repeat-end ng-show="item.expanded">

【讨论】：

是的，我这样做了，现在所有行都会出现，但是链接的行应该在一行中，您对此有什么想法吗？