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

您可以在ng-if语句中调用范围函数，该函数将检查item.type === "big"是否也跟踪item.type !== "big"的次数并从索引中减去该数字$scope.skipped = 0; $scope.isBig = function(type) { if (type === "big") { return true; else { $scope.skipped++; return false; } }重复的元素。

在Angular控制器内：

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

HTML：

{{1}}

Answer 2

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

CSS计数器在所有主流浏览器中实现，因此可用（canIUse.com）

您重置了sorrounding元素的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（来自Jeanluca Scaljeri）

Answer 3

这不是棱角分明的，而是数学

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

只需将索引除以2！

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

ng-repeat中的数字特定项（Angular）

3 个答案:

更新