分割一个表到基于列的条件的多个表使用Angularjs

Question

As of now I have done with ng-if and I have created custom directives. 
 

 
<div class='tbl-container' ng-show='data.length > 0 && !loading'> 
 
\t \t \t <extype></extype> 
 
</div> 
 
<div class='tbl-container' ng-show='data.length > 0 && !loading' > 
 
\t \t \t <extype2></extype2> 
 
</div> 
 

 
Then I have created individual tables in html with ng-if 
 

 
<table class='smp-tbl' id='details-pane'> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th>Activity</th> 
 
\t \t \t <th>Zone</th> 
 
\t \t \t <th>Status</th> 
 
\t \t \t <th>Start Time</th> 
 
\t \t \t <th>End Time</th> 
 
\t \t \t <th>Elapsed Time</th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <tr ng-if="item.zone === 'USA'" ng-repeat='(key, item) in highLvlDetails' class='clickable'> 
 
\t \t \t <td ng-click='viewDetials(key, dc)'>{{ key }}</td> 
 
\t \t \t <td ng-click='viewDetials(key, dc)'>{{ item.zone }}<span><i class="fa fa-home" aria-hidden="true"></i></span></td> 
 
\t \t \t <td ng-click='viewDetials(key, dc)' ng-class='{ complete: item.status === "COMPLETE", running: item.status === "RUNNING", started: item.status === "STARTED" }'>{{ item.status }}</td> 
 
\t \t \t <td ng-click='viewDetials(key, dc)'>{{ item.startTime }}</td> 
 
\t \t \t <td ng-click='viewDetials(key, dc)'>{{ item.endTime }}</td> 
 
\t \t \t <td ng-click='viewDetials(key, dc)'>{{ item.elapsedTime }}</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

我具有基于列的内容在一个单页，以显示多个表。例如：

<tr> 
 
    <th>Activity</th> 
 
    <th>Zone</th> 
 
    <th>Status</th> 
 
    <th>Start Time</th> 
 
    <th>End Time</th> 
 
    <th>Elapsed Time</th> 
 
</tr>

如果区=“USA”，那么不同的表应该出现在页面上的所有美国同样的，如果带=“英国”，另一个表应该出现的区域。在这个我有多个区域，我想多个表格出现在一个页面中。我不知道如何在angularjs中做到这一点。请帮我解决这个问题。

Answer 1

使用NG-如果对于这一点， 下面是一个例子，这将有助于

<table ng-if="zone=='USA'"> 
<tr> 
    <th>USA Activity</th> 
    <th>USA Zone</th> 
    <th>USA Status</th> 
    <th>USA Start Time</th> 
    <th>USA End Time</th> 
    <th>USA Elapsed Time</th> 
</tr> 
</table> 
<table ng-if="zone=='UK'"> 
<tr> 
    <th>UK Activity</th> 
    <th>UK Zone</th> 
    <th>UK Status</th> 
    <th>UK Start Time</th> 
    <th>UK End Time</th> 
    <th>UK Elapsed Time</th> 
</tr> 
</table>