Search code examples
javascriptangularjslimitangularjs-ng-repeat

AngularJS: How to change ng-repeat limitTo based on variable?


I would like to show a different limitTo number on Angular.js ng-repeat, based on a variable.

Here is my code:

<input type="text" ng-model="search" ng-change="checkNewCard(search)"/>
<div ng-repeat="score in scores | filter:search | limitTo:6" ng-hide="search">
...
</div>
<div ng-repeat="score in scores | filter:search | limitTo:5" ng-hide="!search">
...
</div>
<div new-card name="search" ng-show="showNewCard"></div>

and in the controller:

$scope.showNewCard = false;
$scope.checkNewCard = function (search) {
if (search == "")
    $scope.showNewCard = false;
else {
    $scope.showNewCard = true;
    }
};

I can only assume there is a more elegant way of changing the limitTo based on the search input, I just have no idea what to look for.

You can see the implementation of this code on http://happinesshunt.co.

P.S. I'm new here and new to development in general, so please forgive me if the question wasn't asked properly.

Thanks ahead!


Solution

  • Here could be a first solution (since it can be improved, e.g. by hiding/displaying the more/less links):

    <div ng-repeat="score in scores | limitTo: limit">
    ...
    </div>
    <a href ng-click="incrementLimit()">more</a>
    <a href ng-click="decrementLimit()">less</a>
    

    In your controller:

    var limitStep = 5;
    $scope.limit = limitStep;
    $scope.incrementLimit = function() {
        $scope.limit += limitStep;
    };
    $scope.decrementLimit = function() {
        $scope.limit -= limitStep;
    };