AngularJS对条目列表进行反转显示了索引编号的非反转

AngularJS reversing a list of items shows non-reversed index numbering

本文关键字：索引 编号 显示 列表 AngularJS      更新时间：2023-09-26

我写了一个过滤器，使用一个关于反向过滤器的堆栈溢出问题来反转一个列表。

我代码:

<div ng-repeat="query in queries | reverse">
  <p>Submission: {{$index}}</p>
  <p>Title: {{query.title}}</p>
  <p>Body: {{query.response}}</p>
</div>

数组:

var queries = [
  { title: "Query type A", body: "Response of query type A" },
  { title: "Query type B", body: "Response of query type B" },
  { title: "Query type C", body: "Response of query type C" }
];

现在我的列表颠倒了，我想显示每个项目的计数，所以它看起来像这样:

Submission: 3
Title: Query type C
Body: Response of query type C
Submission: 2
Title: Query type B
Body: Response of query type B
Submission: 1
Title: Query type A
Body: Response of query type A

但是，顺序正确地颠倒了，但是提交编号(简单地说是$index)是向后的:

Submission: 1
Title: Query type C
Body: Response of query type C
Submission: 2
Title: Query type B
Body: Response of query type B
Submission: 3
Title: Query type A
Body: Response of query type A

我意识到这可能是正确的行为，但我如何显示相反的数字?

$index只是遍历循环中的项。它没有意识到这种逆转。您可以在查询中使用"id"元素，例如:

var queries = [
  { title: "Query type A", body: "Response of query type A", id:1 },
  { title: "Query type B", body: "Response of query type B", id:2 },
  { title: "Query type C", body: "Response of query type C", id:3 }
];
使用<p>Submission: {{query.id}}</p>代替<p>Submission: {{$index}}</p>。

不打印$index，而是打印$index与数组长度的差值:

{{queries.length - $index}}

这是一个好问题，朋友，过去我遇到过同样的问题而不是给出{{$index}}，给出

{{查询。长度+ 1 - $index}}

相关文章：