分割一個表到基於列的條件的多個表使用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>