2017-03-24 2 views
0

특정 기준에 따라 동적으로 행을 생성하는 테이블이 있습니다. 그러나 행을 최대 5 행으로 제한하고 싶습니다. 5 개 이상의 행이있는 경우 표의 하단에 '추가 기사'라는 링크가 표시되도록하고 싶습니다. 행 수가 5 개 이하인 경우 '더보기'링크를 표시하지 않으려합니다. 나는 여기서 ng-if를 사용해야한다고 확신하지만 어떻게 구성해야하는지 확신하지 못합니다. 어떤 제안?AngularJS on 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> 

답변

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> 
+0

와우 너무 간단합니다. 확실히 overthinking. 감사! – Dave

+0

이렇게하면 버튼을 한 번만 클릭 할 수 있습니다. 그렇지 않니? 총 10 개 이상의 게시물이 있다면 어떻게 될까요? –

+3

여기서 우리 요구 사항은 5로 제한됩니다. –

0

또한 어떤 회의에게 특정 기준을 보여줍니다 NG-쇼를 사용할 수 있습니다. 콘텐츠를 표시하는 데 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

희망!

0

먼저 변수를 사용하여 표시되는 게시물 수를 결정합니다. limitTo: 5limitTo: shownPosts으로 변경하면됩니다. 그러면 보이는 것보다 많은 게시물이 있는지 확인하고 싶을 것입니다.
<div ng-if="data.list.length > shownPosts">
사이드 노트 : 버튼을 클릭 할 때마다 shownPosts 변수를 5 씩 증가시키고 싶습니다.