AngularJS实现三级Table列表
时间: 2023-11-27 15:53:37 浏览: 37
AngularJS可以通过使用`ng-repeat`指令来实现三级Table列表。以下是一个简单的例子:
```html
<table>
<thead>
<tr>
<th>一级标题</th>
<th>二级标题</th>
<th>三级标题</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item1 in items1">
<td>{{item1.title}}</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="item2 in item1.items2" ng-repeat-start="item1 in items1">
<td></td>
<td>{{item2.title}}</td>
<td></td>
</tr>
<tr ng-repeat="item3 in item2.items3" ng-repeat-start="item2 in item1.items2">
<td></td>
<td></td>
<td>{{item3.title}}</td>
</tr>
<tr ng-repeat-end ng-if="item2.items3.length == $last">
<td colspan="3">{{item3.content}}</td>
</tr>
</tbody>
</table>
```
在这个例子中,我们使用了两个可嵌套的`ng-repeat`指令,分别用于遍历一级、二级和三级列表。我们还使用了`ng-repeat-start`和`ng-repeat-end`来标记二级和三级列表的开始和结束位置,并使用`$last`来判断是否在最后一项结束。最后,我们使用`colspan`属性来让三级列表的内容跨越三列。
你可以将以上代码复制到你的HTML文件中,并将`items1`、`items2`和`items3`替换为你自己的数据模型。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)