Angular JS ng-show setup

Question

I'm trying to use ng-repeat and ng-show to split up data into two columns

<div class="col-md-4">
  <div class="row" infinite-scroll="eventSearchService.getMoreEvents()">
   <div ng-repeat="event in eventSearchService.events" ng-show="$odd">
  </div>
</div>

<div class="col-md-8">
  <div class="row" infinite-scroll="eventSearchService.getMoreEvents()">
   <div ng-repeat="event in eventSearchService.events" ng-show="$odd">
  </div>
</div>

While it works because I'm splitting up the data odds and even. What is happening is the boxes in the left div are much bigger and thus creating a div repeat that extends much longer then the column on the right which has much smaller divs. Is there a way to restrict the amount of divs shown on the left side or show just certain indexOf the data set?

Answer 1

You are actually describing the use of the filter limitTo , where you can set the offset of the number of items you want to display in ng-repeat.

You could just do:-

<div ng-repeat="event in eventSearchService.events | limitTo: 8" ng-show="$odd">
</div>

Remember that ng-show will still render the element and keep it in DOM, you may want to use ng-if if you do not want the $even elements in DOM at all.