AngularJS反转项目列表显示非反向索引编号

时间:2014-07-23 18:31:28

标签: javascript angularjs angularjs-ng-repeat

我编写了一个过滤器来使用反向过滤器的许多堆栈溢出问题之一来反转列表。

我的代码:

<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

我意识到这可能是正确的行为,但我该如何反映这个数字呢?

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

不是打印$index,而是从数组长度打印$index的差异:

{{queries.length - $index}}

答案 2 :(得分:0)

它是一个好问题的朋友,在过去我遇到了同样的问题 Give而不是给{{$ index}},给

{{queries.length + 1 - $ index}}

相关问题