Find number of columns produced by ng-repeat

Question

I have a div on which i used ng-repeat. It displays the list of photos in a grid. This is all very simple stuff and working fine.

I need to add file explorer like navigation on the items inside the grid. The easiest way would be to know the length of a line (number of items in the line) and then do simple math to calculate where to move the selection based on the key pressed.

The problem i'm having is finding out the length of the line. Is it even doable?

Edit :

<div class="images-cq__item" ng-repeat="photo in displayedPhotos">
    <div ng-class="{active: photo.selected}" id="{{photo.uuid}}" ng-click="selectionEvent({value: photo.uuid, event: $event, index: $index})">
    <div class="images-cq-statut" ng-show="photo.statusCQ != 'none'">
        {{photo.statusCQ}}
    </div>
    <div class="img-cq">
        <img ng-src="{{photo.thumbPath100}}" alt="Alternate Text" />
        <a href="#" class="zoom-cq" title="zoom" ng-click="zoomOpen({value: $index, event: $event})">zoom</a>
    </div>
    <p>
        {{photo.title}}
    </p>
    <ul class="images-cq-tags">
        <li id="{{photo.uuid}}.{{tag.value}}" ng-repeat="tag in tags" style="display:none">
            <span>{{tag.name}}</span>
        </li>
    </ul>
</div>

The displayedPhotos is a simple array with photo objects obtained from the server. It contains several links (thumbnails, original), and some other info but i don't think it is relevant in this case.

Probably... You should include the code you want us to test against. — Arg0n, Dec 01 '15 at 15:16

score 1 · Accepted Answer · answered Dec 01 '15 at 15:39

This is what i got:

JavaScript

var items = $(".images-cq__item");
var previousTop = null;
var itemsPerRow = 0;

for(var i = 0; i < items.length;i++){
  var item = items.eq(i);
  var offset = item.offset();
  var top = offset.top;

  if(!previousTop || (top == previousTop)){
    previousTop = top;
    itemsPerRow++;
  } else{
    break;
  }
}

console.log(itemsPerRow); // 3

HTML

<div class="container">
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
  <div class="images-cq__item"></div>
</div>

CSS

.container{
  width: 400px;
}

.images-cq__item{
  width: 120px;
  height: 120px;
  background: green;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

I actually didn't know there is something as handy as .offset(). This answers perfectly my question. Thank you. — madks13, Dec 01 '15 at 15:50

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

You can use {{$index}} inside ng-repeat

See this Angular.js. How to count ng-repeat iterations which satisfy the custom filter

edited May 23 '17 at 11:59

Community

1
1

answered Dec 01 '15 at 15:06

Rohan Kawade

453
5
18

What i'm looking for is not that kind of length. Let's say i have 50 elements, they will be displayed 7 per line. What i need to find is '7' as length. This length depends on many things (simply using ctrl + mouse wheel to zoom in will reduce length to 3). – madks13 Dec 01 '15 at 15:12
This does not answer the question. Comment to downvote. – Arg0n Dec 01 '15 at 15:45

Find number of columns produced by ng-repeat

2 Answers2