Question

我想实现以下场景，如linkedin：

我们假设我发表评论，有些人会喜欢我的评论：

Comment blah blah blah

You, Jane Jackson and 5 more like this

当您点击5 more时，它会显示完整的人员列表：

You, Jane Jackson, Jack Black, Jeny Jack, Bill Gates, Steve Mobs and Steve Jobless like this show less...

show less是一个实际链接，只要点击它就会将列表缩小为格式：

You, Jane Jackson and 5 more like this

假设我将所有数据都放入从服务中恢复的模型中：

$scope.Model = [{
  UserId: '',
  FirstName: '',
  LastName: ''
}];

其中userid用于将实际网址格式化为用户个人资料...

Answer 1

这是一个开始：

JS：

$scope.limitToNumber = 2;

HTML：

<span ng-repeat="person in Model | limitTo: limitToNumber ">
     {{person.FirstName}} {{ person.LastName }}
<span>
<span ng-if="Model.length > 2">
    <span> and {{Model.length -2}} people liked this <!-- use ng-pluralize here for singular/plural -->
    <span ng-if="limitToNumber == 2" ng-click="limitToNumber=10000000">Show More </span>
    <span ng-if="limitToNumber != 2" ng-click="limitToNumber=2">Show Less </span>
</span>

AngularJS将崩溃数链接扩展到人员列表，折叠回数字

1 个答案: