angularjs - How to display the link element based on the list items length -

we need display list items if list length more 4 need display "show" link otherwise hide "show" link.

demo:

html :

<div ng-controller="myctrl">   <ul class="scrollbar" ng-class="{'noscrollbar' : scrollbar}">   <li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li> </ul> <a ng-click="a()">{{text}}</a> </div> 

js:

var myapp = angular.module('myapp',[]);  function myctrl($scope) {     $scope.names=[ {name:'jani',country:'norway'}, {name:'hege',country:'sweden'}, {name:'jani',country:'norway'}, {name:'hege',country:'sweden'}, {name:'jani',country:'norway'}, {name:'hege',country:'sweden'}, {name:'jani',country:'norway'}, {name:'hege',country:'sweden'}, {name:'kai',country:'denmark'}];  $scope.showtext=true; $scope.scrollbar=false; $scope.text='show'; $scope.a=function() { alert("call"); $scope.showtext=!$scope.showtext; $scope.scrollbar=!$scope.scrollbar; $scope.text=='show' ? $scope.text='less' : $scope.text='show';  }; } 

css:

.scrollbar {   max-height:150px;   overflow-y:scroll;   width:200px; }  .noscrollbar {     max-height:100%;     overflow:auto; } 

how display 'show' link element based on list items length

you use ng-show/ng-if here

<a ng-click="a()" ng-show="names.length > 4">{{text}}</a> 

note

if wanted use ng-if here, need put text variable inside object ensure dot rule followed.

<a ng-click="a()" ng-if="names.length > 4">{{model.text}}</a>