Question

我有一个使用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>

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

Answer 1

This就是我得到的：

的JavaScript

let drawPattern: CGPatternDrawPatternCallback = { (_, context) in
        //draw pattern using context...
}

var callbacks = CGPatternCallbacks(version: 0, drawPattern: drawPattern, releaseInfo: nil)

let pattern: CGPatternRef? = CGPatternCreate(nil, rect, CGAffineTransformIdentity, 24, 24, CGPatternTiling.ConstantSpacing, true, &callbacks)

HTML

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

CSS

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

Answer 2

您可以在{{$index}}

中使用ng-repeat

请参阅此Angular.js. How to count ng-repeat iterations which satisfy the custom filter

查找ng-repeat生成的列数

2 个答案: