2016-05-09 7 views
1

Ich habe eine Tabelle mit ng-Wiederholung erstellt. In dieser Tabelle habe ich den verwendeten ng-repeat-start und ng-repeat-end, um eine Zeile auszublenden, die nur dann sichtbar ist, wenn der Benutzer sie sehen möchte. Nun mein Problem ist, dass, wenn ich versuche, diese Tabelle nach Excel zu exportieren, die Zeilen, die sichtbar sind, nur in der Excel angezeigt werden, da auch Zeilen, die miteinander verknüpft sind, als unterschiedliche Zeilen erscheinen (wie in der Tabelle auch sie unterschiedliche Zeilen sind). Nun, was ich will, ist, dass alle Zeilen, ob sichtbar oder nicht, in der Excel angezeigt werden sollten. Es gibt eine Möglichkeit, dass zwei Zeilen, die miteinander verknüpft sind (da sie Daten enthalten, die sich auf eine einzige Instanz beziehen), in Excel als einzelne Zeile angezeigt werden können. Hier ist mein CodeDownload Tabelle zu Excel mit versteckten Zeilen mit ng-repeat

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>

Hier ist die Fiddle jede Hilfe dankbar sein Dank würde.

Antwort

1

Verwendung ng-show insted ng-iffiddle

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

ya ich das tat und jetzt alle Zeilen kommen aber Zeilen, die in einer einzigen Reihe kommen tun verknüpft sind, sollten Sie eine Ahnung davon haben. – Manish