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

执行这种编号的 Angular 方法是什么？

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 (让卢卡·斯卡杰里)