Angularjs中的分層網格

Question

我想用angularjs製作分層數據表。 例如，它可以降低表格並在表格的第一行佔據一個表格。 如何創建嵌套表格這個事件？ 我寫下了我想如何做下面的例子。

請幫我！謝謝。 例子：

<table> 
<thead> 
    <tr> 
    <th>Head 1</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>Content 1</td> 
    </tr> 
    <tr> 
    <td style="margin-left: 10px"> 
     <table> 
      <thead> 
       <tr> 
       <th>Head 1.1</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td>Content 1.1</td> 
       </tr> 
        <table> 
         <thead> 
          <tr> 
          <th></th> 
         </thead> 
         <tbody> 
          <tr> 
          <td>Content 1.1.1</td> 
         </tr> 
         </tbody> 
        </table> 
      </tbody> 
      </table> 
    </td> 
    </tr> 
</tbody> 
</table> 

Answer 1

所有首先 - 表表是有效的HTML（參見：Is a html table within a table valid?）

所有二 - 什麼是真正的問題嗎？您需要一個存儲您想要顯示的數據的控制器。你可以迭代ng-repeat來獲得結構。

它看起來像你想顯示一個目錄。清單是一個更好的選擇在這裏：

HTML：

<div ng-controller="TableController"> 
    <ul> 
    <li ng-repeat="c in content"> 
    {{c.header}} 
    <ul> 
     <li ng-repeat="cc in c.content">{{cc}}</li>  
    </ul> 
    </li> 
    </ul> 
</div> 

控制器：

var app = angular.module("tableApp", []); 
app.controller("TableController", ["$scope",function($scope){ 
     $scope.content = [ 
     { header: "Head 1", content: ["Content 1"]}, 
     { header: "Head 1.1", content: ["Content 1.1", "Content 1.1.1"]} 
    ]; 
}]); 

// See: https://jsfiddle.net/6se8xq41/ 

see example here