角度 ng-repeat 反向

IT技术 javascript arrays angularjs reverse angularjs-ng-repeat
2021-01-28 21:48:13

我怎样才能得到一个有角度的反向数组?我正在尝试使用 orderBy 过滤器,但它需要一个谓词(例如“名称”)来排序:

<tr ng-repeat="friend in friends | orderBy:'name':true">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
<tr>

有没有办法在不排序的情况下反转原始数组。像那样:

<tr ng-repeat="friend in friends | orderBy:'':true">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
<tr>
6个回答

我建议使用自定义过滤器,例如:

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

然后可以像这样使用:

<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>

在这里看到它的工作:Plunker 演示


该过滤器可以根据您的需要进行定制,以满足您的需求。我在演示中提供了其他示例。一些选项包括在执行反转之前检查变量是否为数组,或者使其更宽松以允许反转更多事物,例如字符串。

@Chris Yeung:不建议在 null 时返回空的“[]”。最好返回原始值。
2021-03-17 21:48:13
好的!请注意,items.reverse()修改数组而不是仅仅创建一个新数组并返回它。
2021-03-26 21:48:13
if (!angular.isArray(items)) return false;在尝试反转它之前,您应该添加以验证您是否拥有一个数组。
2021-03-27 21:48:13
需要更多地防御空值,应该使用以下内容:返回项目?items.slice().reverse() : [];
2021-03-29 21:48:13
谢谢!我忽略了这一点。我扔了一个slice()来解决这个问题。
2021-04-13 21:48:13

这是我使用的:

<alert ng-repeat="alert in alerts.slice().reverse()" type="alert.type" close="alerts.splice(index, 1)">{{$index + 1}}: {{alert.msg}}</alert>

更新:

对于旧版本的 Angular,我的回答是可以的。现在,你应该使用

ng-repeat="friend in friends | orderBy:'-'"

或者

ng-repeat="friend in friends | orderBy:'+':true"

来自https://stackoverflow.com/a/26635708/1782470

track by,这是唯一对我有用的方法
2021-03-23 21:48:13
@delboud 你应该在 orderBy 之后使用 track by: ng-repeat="friend in friends | orderBy:'+': true track by $index"
2021-03-23 21:48:13
这实际上对我有用。万分谢意
2021-04-13 21:48:13

很抱歉在一年后提出这个问题,但有一个新的、更简单的解决方案,它适用于 Angular v1.3.0-rc.5 及更高版本

文档中提到:“如果没有提供属性(例如'+'),则数组元素本身用于比较排序的位置”。因此,解决方案将是:

ng-repeat="friend in friends | orderBy:'-'" 或者

ng-repeat="friend in friends | orderBy:'+':true"

这个解决方案似乎更好,因为它不修改数组,也不需要额外的计算资源(至少在我们的代码中是这样)。我已经阅读了所有现有的答案,但仍然更喜欢这个答案。

谢谢你的提示!作为阅读本文的其他人的提醒,看起来这在 rc4 ( v1.3.0-rc.4) 中不起作用如果有人有机会在新版本中试用它,请告诉我们!
2021-03-24 21:48:13
@mikermcneil 感谢您的评论!根据相同的文档,它应该从v1.3.0-rc.5rc.5 docs vs rc.4 docs)开始工作。我已经更新了答案
2021-03-24 21:48:13
不适合我(v1.3.5)。试过了orderBy:'+':true, orderBy:'-':true, orderBy:'-':false, orderBy:'+':false:(
2021-03-30 21:48:13
@Cody 抱歉回答晚了。给你 - 一个带有 angular v1.3.5 jsfiddle.net/dmitry_gonchar/L98foxhm/1的工作示例可能问题出在另一个地方。
2021-04-12 21:48:13
@alevkon 是的。但如果您指定字段 ('+id', '-id' fe),它就可以工作。也许这是 Angular 中的一个错误,如果您不指定字段,它就不能以正常顺序工作?我从文档中采用了这种方法(链接在答案中),所以我和你一样感到惊讶。无论如何,问题是如何反转数组。
2021-04-12 21:48:13

简单的解决方案:-(无需制作任何方法)

ng-repeat = "friend in friends | orderBy: reverse:true"
对我来说很好用。谢谢!
2021-04-02 21:48:13

您可以通过 $index 参数反转

<tr ng-repeat="friend in friends | orderBy:'$index':true">
为我工作(虽然使用属性进行排序而不是 $index) stackoverflow.com/questions/16261348/...
2021-03-15 21:48:13
不适用于 AngularJS 1.2.13。我修改了我的对象数组,为每个对象添加了一个 id。id 是数组内对象的索引。然后ng-repeat="friend in friends | orderBy:'id':true"工作。
2021-03-20 21:48:13
应该可以,但不能(尝试使用和不使用引号$index)。我使用的是 Angular 1.1.5。
2021-03-23 21:48:13