CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatlimit
Mr world wide
Mr world wide

Reputation: 4814

ng-repeat limit based on the length with ng-if condtion

    <div ng-repeat="badgesData in deptUSersData.badges | limitTo : 7 track by $index">
      ........content.......
    </div>

I want to limitTo : 7 only if deptUSersData.badges.lenght is more than 8 how can i do it.?

I want something like this: 

<div ng-repeat="badgesData in deptUSersData.badges 
 ng-if=deptUSersData.badges.lenght > 8 ? limitTo : 7 : '' track by $index>

Upvotes: 1

Views: 755

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result , use ng-show with condition checking array length and limit using $index < 7 to limit to 7 

ng-show="{{deptUSersData.badges.length > 8? $index < 7: true}}">

code sample - https://codepen.io/nagasai/pen/vRRQVw

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.limit = 6;
    $scope.deptUSersData = {
       badges :[
        1,2,3,4,5,6,7,8,9
       ]
    }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
  <div>
    <div ng-repeat="badgesData in deptUSersData.badges track by $index" ng-show="{{deptUSersData.badges.length > 8? $index < 7: true}}">
      {{badgesData}}
    </div>
  </div>
</div>

Note: Change array length to 8 or less to see the difference

Upvotes: 1

Taki
Taki

Reputation: 17654

you can set a variable inside the controller and use it to limit ng-repeat, something like :

<div ng-repeat="badgesData in deptUSersData.badges | limitTo : myLimit track by $index">
   ........content.......
</div>


app.controller('someController', function($scope) {
    if(deptUSersData.badges.lenght > 8)
        $scope.myLimit = 7;
  }
);

don't worry if length is less than 8 and myLimit end up being undefined

according to : limitTo documentattion

If limit is undefined, the input will be returned unchanged.

so the filter should not apply and everything should be shown.

Upvotes: 2

Related Questions