ng-repeat (Angular) 中的特定项目数量

Question

假设以下对象

var items [
    { type: 'big', .... },
    { type: 'small', .... },
    { type: 'big', .... },
    { type: 'small', .... },
    { type: 'big', .... },
];

我在ng-repeat 中使用如下：

<div ng-repeat="item in items">
   <span ng-if="item.type === 'big'>{{$index}}</div>
   <p> ..... </p>
</div>

此代码的问题是我只想用type === 'big' 对项目进行编号，并且我不想在编号中出现空白。现在的输出是：

<div>
   <span>0</div>
   <p>......</p>
</div>
<div>
   <p>......</p>
</div>
<div>
   <span>2</div> // I want a 1 here
   <p>......</p>
</div>
<div>
   <p>......</p>
</div>
<div>
   <span>4</div> // and a 2 here!
   <p>......</p>
</div>

执行这种编号的角度方式是什么？

Answer 1

我提出的解决方案根本不是 Angular 解决方案。但相反，我将使用 CSS 来解决您单独显示的问题：

CSS 计数器已在所有主要浏览器中实现，因此是一种可用的可能性 (canIUse.com)

您为周围元素重置一个 css 计数器，并为每个显示的元素增加它：

<div class="list">
    <div ng-repeat="item in items">
       <p ng-class="item.type"> ..... </p>
    </div>
</div>

以及相应的 CSS：

.list{
    counter-reset: big-counter;
}

.list .big:before {
    content: counter(big-counter);
    counter-increment: big-counter;
}

我做了 this Plunker 来显示结果。

---

更新

要使用字符而不是数字，请将 css 计数器行更改为以下内容：

content: counter(big-counter,lower-latin);

或

content: counter(big-counter, upper-latin);

Updated Plunker（让卢卡·斯卡杰里）

Answer 2

您可以在ng-if 语句中调用一个作用域函数，该函数将检查item.type === "big" 是否为item.type !== "big" 的次数，并从重复元素的索引中减去该数字。

在你的 Angular 控制器内部：

$scope.skipped = 0;
$scope.isBig = function(type) {
  if (type === "big") {
    return true;
  else {
    $scope.skipped++;
    return false;
  }
}

HTML：

<div ng-repeat="item in items">
   <span ng-if="isBig(item.type)">{{$index - skipped}}</div>
   <p> ..... </p>
</div>

Answer 3

这不是角度，而是数学

<span ng-if="item.type === 'big'>{{$index/2}}</div>

只需将索引除以 2！

当然，您可以在控制器中做一些有趣的事情，但这可能是最快和最简单的。