在AngularJS中的詳細信息表

Question

我已經在AngularJS應用程序中加載了表格數據。我想在表格中顯示它們。但我也希望有一些行的詳細視圖。例如：

<table> 
    <tr ng-repeat="datum in data"> 
     <!-- if datum.showDetail => detail view --> 

      <td colspan="N"> 
       <h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1> 
       ... 
       <p>{{ datum.fieldN }}</p> 
      </td> 

     <!-- else => row view --> 

      <td>{{ datum.field1 }}</td> 
      <td>{{ datum.field2 }}</td> 
      ... 
      <td>{{ datum.fieldN }}</td> 
    </tr> 
</table> 

這樣做的角度方式是什麼？

Answer 1

爲什麼不只是將ng-show和ng-hide指令添加到td？

<table> 
    <tr ng-repeat="datum in data" > 
     <!-- if datum.showDetail => detail view --> 

      <td colspan="N" ng-show="datum.showDetail"> 
       <h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1> 
       ... 
       <p>{{ datum.fieldN }}</p> 
      </td> 

     <!-- else => row view --> 

      <td ng-hide="datum.showDetail">{{ datum.field1 }}</td> 
      <td ng-hide="datum.showDetail">{{ datum.field2 }}</td> 
      ... 
      <td ng-hide="datum.showDetail">{{ datum.fieldN }}</td> 
    </tr> 
</table> 

還要注意的是，如果你正在使用的角度UI擴展時，ui-if指令可能會是更好的選擇，因爲它實際上刪除未使用的TD的從表中，而不是僅僅隱藏它們，像ng-hide。