AngularJS 停留在 ng-if 上

Question

我有一个 table 可以根据特定条件动态生成行。但是，我希望将行限制为最多 5 行。如果超过 5 行，我希望 link 出现在 table 的底部，即 "More Articles"。如果有 5 行或更少，我不希望 "More Articles" link 可见。我很确定我必须在这里使用 ng-if，但不确定如何构建它。有什么建议么？

<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 上

AngularJS stuck on ng-if

angularjs

angular-ng-if