查找由 ng-repeat 生成的列数答案

【问题标题】：Find number of columns produced by ng-repeat查找由 ng-repeat 生成的列数
【发布时间】：2016-03-05 13:21:04
【问题描述】：

我有一个使用 ng-repeat 的 div。它以网格形式显示照片列表。这都是非常简单的东西，而且工作正常。

我需要在网格内的项目上添加文件浏览器，例如导航。最简单的方法是知道一行的长度（行中的项目数），然后根据按下的键进行简单的数学计算来计算将选择移动到哪里。

我遇到的问题是找出线的长度。它甚至可行吗？

编辑：

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

displayPhotos 是一个简单的数组，其中包含从服务器获取的照片对象。它包含几个链接（缩略图、原始链接）和一些其他信息，但我认为它与这种情况无关。

【问题讨论】：

没有我要说的代码是行不通的。
你的意思是我的代码吗？
可能...您应该包含您希望我们测试的代码。
添加了与案例相关的html，希望对您有所帮助。

标签： javascript angularjs html angularjs-ng-repeat

【解决方案1】：

This 是我得到的：

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

【讨论】：

我其实不知道还有像 .offset() 这样方便的东西。这完美地回答了我的问题。谢谢。
没问题。如果这对您有帮助，也请点赞:)。

【解决方案2】：

你可以在ng-repeat里面使用{{$index}}

看到这个Angular.js. How to count ng-repeat iterations which satisfy the custom filter

【讨论】：

我要找的不是那种长度。假设我有 50 个元素，每行将显示 7 个。我需要找到的是“7”作为长度。这个长度取决于很多东西（只需使用 ctrl + 鼠标滚轮放大将长度减少到 3）。
这没有回答问题。发表评论以投反对票。