Question

我有一个基于特定条件动态生成行的表。但是，我希望行最多只能限制为5行。如果行数超过5行，我希望在表格底部显示“更多文章”的链接。如果有5行或更少，我不希望“更多文章”链接可见。我很确定我必须使用ng - 如果在这里，但不知道如何构建它。有什么建议？

<table class="table table-sm table-responsive">
  <thead>
    <tr>
      <th class="wrap-header"><big class="big-text">My Benefits Articles</big></th>
    </tr>
  </thead>
  <tbody ng-repeat="item in data.list track by $index | limitTo: 5">
    <tr>
      <td><a ng-href="{{item.url}}"  target="_blank"> <img class = "icon" src="{{item.icon}}" height="30" width="30"> {{ item.short_desc }}</a></td>
    </tr>
  </tbody>
</table>

<div ng-if="/* What goes here? */">
  <a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
</div>

Answer 1

 <div ng-if="data.list.length > 5">
    <a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
 </div>

Answer 2

您还可以使用ng-show来显示符合特定条件的内容。这比使用ng-if显示内容更好。

   <div ng-show="data.list.length > 5">
       <a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
    </div>

以下是两者的文档：

https://docs.angularjs.org/api/ng/directive/ngShow

https://docs.angularjs.org/api/ng/directive/ngIf

希望这有帮助！

Answer 3

首先，我会使用一个变量来确定显示的帖子数量。这可以通过将limitTo: 5更改为limitTo: shownPosts来实现（请记住在您的范围内声明并设置为5）然后，您要检查是否有比可见的帖子更多的帖子 <div ng-if="data.list.length > shownPosts">
旁注：每次单击按钮时，都希望将shownPosts变量增加5。

AngularJS坚持使用ng-if

3 个答案: