CODEWITHSUNDEEP
angularjs
Muhammad Binladen
Muhammad Binladen

Reputation: 41

how to implement show more in <li> with angularjs ng-repeat directive?

How Do I hide the list data if the list is greater than 3? and a show more button that will show the whole list when it's clicked?

Here is my current code, i do not know how to implement the show more when the ng-repeat directive is inside the li tag.

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

Upvotes: 0

Views: 707

Answers (1)

Protozoid
Protozoid

Reputation: 1207

How about this?

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>

Upvotes: 2

Related Questions