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

Angularjs中的分层网格

1 个答案: