隐藏AngularJS中的Bootstrap表行(1.6)

时间:2018-02-08 01:26:23

标签: angularjs twitter-bootstrap angular-ui-bootstrap

我有一张长桌,我希望默认只显示前三个条目。我想提供类似于"其他元数据"在此页面上显示'查看更多'选项。 '看到更多'链接,一旦点击,将显示表格中的其余行,并且表格底部会出现一个选项,显示"看到更少"。

我尝试过使用ng-show / ng-hide,但是无法实现"更多"一旦显示所有行,链接将显示在表格的底部。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

假设您使用“ng-repeat”填充表格,则应选择其他“索引”或“行号”字段,然后使用“过滤器”过滤索引小于4的位置。单击“看到更多“然后可以改变过滤器。

答案 1 :(得分:0)

只需使用limitTo过滤器显示n个第一个条目,当n可以是范围变量时(这与通常以角度进行分页的方式大致相同)

  

$ filter(' limitTo')(输入,限制,开始)

您将limit设置为3,将begin设置为0

ngRepeat

ng-repeat="row in data | limitTo: showAmount : 0"

在你的控制器里面

$scope.showAmount = 3;