Question

如果列表大于3，如何隐藏列表数据？还有一个显示更多按钮，单击该按钮将显示整个列表？

这是我当前的代码，当ng-repeat指令位于li标记内时，我不知道如何实现更多显示。

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

Answer 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>

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

1 个答案: