CODEWITHSUNDEEP
angularjs
Krish
Krish

Reputation: 517

onclick how to toggle the limitTo value using AngularJS?

On click of my anchor link I want to toggle the list value which is by default initiated as 5 to 500.

that by default I want to show my list values only 5, on click on my link "more" I want to show all other list items, now the text of more will change as "less" kind of accordion, if we click on less now we need to show only 5 list item.

basically how to toggle the value of "limitTo" on click ? now I have 500 on on-click it needs to toggle as 5 when click second time, vs verse...

<div ng-controller="listsCtrl">
        <div>
            <a ng-show="lists.length > 5" ng-click="listLimit=500">more</a>
        </div>

        <div>
            <ul ng-init="listLimit=5">
                <li ng-repeat="list in lists | limitTo:listLimit">test values</li>
            </ul>
         </div>
</div>

Upvotes: 2

Views: 731

Answers (1)

Matt Way
Matt Way

Reputation: 33179

I have put together a fiddle for you that does what I think you are after. The key is to keep track of the listLimit inside a controller, which changes upon clicking on the more/less text.

Fiddle is here

HTML:

<div ng-app="MyModule" ng-controller="MyController">  
    <div ng-repeat="item in list | limitTo:totalItems">
        This is item {{$index}}           
    </div>
    <div ng-click="more()">{{totalItems === 5 ? 'more' : 'less'}}</div>
</div>

js:

var module = angular.module("MyModule", []);
module.controller("MyController", function($scope) {
    // create the dummy list items
    $scope.list = [];
    for(var i=0; i<100; i++){
        $scope.list.push({
            value: i
        });
    }

    // set the initial item length
    $scope.totalItems = 5;

    // more/less clicked on
    $scope.more = function(){
        if($scope.totalItems === 5){
            $scope.totalItems = $scope.list.length;
        }else{
            $scope.totalItems = 5;
        }       
    };  
});

Upvotes: 1

Related Questions