angular.js - Angularjs 如何实现折叠内容

浏览:40日期:2023-01-02

问题描述

我用Angularjs的ng-repeat指令从server输出了一段数据,代码类似于:<table>

<thead> <tr> <th>itNo</th> <th>itVP</th> </tr> </thead> <tbody> <tr ng-repeat='item in lists| orderBy:’itNo’| filter:query'><td>{{item.itNo}}</td><td>{{item.itVP}}</td> </tr> </tbody> </table>

我想要里面的数据实现折叠,比如itNo都等于1的,平时只显示第一条,然后点击加号之类的东西才能够展开看到其余的信息。这个要怎么做,怎么写呢?

问题解答

回答1:

第一行默认显示数组的第0个元素,不放在ng-repeat里边。然后在写个tr,进行循环,从数组第1个开始循环到最后。tr上加ng-show属性,表达式初始化为false,默认隐藏。当点击加号,则表达式赋值true,显示第二行开始的其他元素。

回答2:

最好通过指令把折叠定义成组件,更好的操作dom操作,可复用组件,或者直接用,angular ui里面的定义好的组件

回答3:

ui-bootstrap 里面有Tabs 可以看下

相关文章: