Angularjs 如何基于列表项长度显示链接元素

我们需要显示所有的列表项，如果列表长度超过4，我们需要显示“显示”链接，否则隐藏“显示”链接

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>

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:

---

如何根据列表项长度显示“show”链接元素

您可以在此处使用

ng show

/

ng if

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

---

@经理：这是什么？

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

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