Найти количество столбцов, созданных с помощью ng-repeat

0

У меня есть div, на котором я использовал ng-repeat. Он отображает список фотографий в сетке. Все это очень просто и отлично работает.

Мне нужно добавить файловый проводник, как навигация по элементам внутри сетки. Самый простой способ - узнать длину строки (количество элементов в строке), а затем выполнить простую математику, чтобы вычислить, куда переместить выделение на основе нажатой клавиши.

Проблема, с которой я сталкиваюсь, - выяснить длину линии. Это даже выполнимо?

Редактировать:

<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>

ОтображаемыйФотос представляет собой простой массив с фотообъектами, полученными с сервера. Он содержит несколько ссылок (эскизы, оригиналы) и некоторую другую информацию, но я не думаю, что это актуально в этом случае.

  • 0
    Без кода я бы не справился.
  • 0
    Вы имеете в виду мой код?
Показать ещё 2 комментария
Теги:
angularjs-ng-repeat

2 ответа

1
Лучший ответ

Это то, что я получил:

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;
}
Поделиться
  • 0
    На самом деле я не знал, что есть что-то удобное, как .offset (). Это прекрасно отвечает на мой вопрос. Спасибо.
  • 0
    Нет проблем. Просьба также подтвердить, если это помогло вам :).
0

Вы можете использовать {{$index}} внутри ng-repeat

См. Это Angular.js. Как подсчитать итерации ng-repeat, которые удовлетворяют настраиваемому фильтру

Поделиться
  • 0
    То, что я ищу, это не такая длина. Допустим, у меня есть 50 элементов, они будут отображаться по 7 в строке. То, что мне нужно найти, это «7» как длина. Эта длина зависит от многих вещей (простое использование ctrl + колесико мыши для увеличения уменьшит длину до 3).
  • 0
    Это не отвечает на вопрос. Комментарий к downvote.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню