如何使用 angularjs ng-repeat 指令在 <li> 中实现显示更多？

【问题标题】：how to implement show more in <li> with angularjs ng-repeat directive?如何使用 angularjs ng-repeat 指令在 <li> 中实现显示更多？
【发布时间】：2018-06-23 08:50:57
【问题描述】：

如果列表大于 3，如何隐藏列表数据？还有一个显示更多按钮，当它被点击时会显示整个列表？

这是我当前的代码，当 ng-repeat 指令在 li 标签内时，我不知道如何实现 show more。

                <ul>
                    <li ng-repeat="data in datas"> 
                        <div>data</div>
                    </li>
                </ul>

【问题讨论】：

标签： angularjs

【解决方案1】：

这个怎么样？

var app = angular.module("App", []);

app.controller("Ctrl", [function () {
  var ctrl = this;
  
  ctrl.items = ["Item1", "Item2", "Item3", "Item4", "Item5", "item6"]
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="App" ng-controller="Ctrl as ctrl">
    <ul ng-init="limit = 3">
        <li ng-repeat="item in ctrl.items | limitTo: limit as results">{{item}}</li>
    </ul>
    <button ng-hide="results.length === ctrl.items.length" 
            ng-click="limit = limit +2">show more...</button>
</div>

【讨论】：