Question

如何在角度中获得反转数组？我正在尝试使用orderBy过滤器，但它需要一个谓词（例如'name'）来排序：

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

Answer 1

我建议使用自定义过滤器，例如：

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

然后可以使用：

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

在此处查看：Plunker Demonstration

此滤镜可根据您的需要进行定制。我在演示中提供了其他示例。一些选项包括在执行反向之前检查变量是否为数组，或者使其更宽松以允许更换诸如字符串之类的更多内容。

Answer 2

这就是我用的：

<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

Answer 3

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

在docs中提到： “如果没有提供属性，（例如'+'），则数组元素本身用于比较排序”。所以，解决方案将是：

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

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

此解决方案似乎更好，因为不会修改数组并且不需要额外的计算资源（至少在我们的代码中）。我已经阅读了所有现有的答案，仍然更喜欢这个答案。

Answer 4

你可以通过$ index参数反转

<tr ng-repeat="friend in friends | orderBy:'$index':true">

Answer 5

简单的解决方案： - （无需制作任何方法）

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

Answer 6

您可以在示波器上调用方法来为您反转它，如下所示：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        $scope.items = [1, 2, 3, 4];
        $scope.reverse = function(array) {
            var copy = [].concat(array);
            return copy.reverse();
        }
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <ul>
        <li ng-repeat="item in reverse(items)">{{item}}</li>
    </ul>
</body>
</html>

请注意，$scope.reverse会创建数组的副本，因为Array.prototype.reverse会修改原始数组。

Answer 7

如果您使用的是1.3.x，则可以使用以下

{{ orderBy_expression | orderBy : expression : reverse}}

示例按发布日期降序列出图书

<div ng-repeat="book in books|orderBy:'publishedDate':true">

源：https://docs.angularjs.org/api/ng/filter/orderBy

Answer 8

如果您使用angularjs 版本1.4.4及更高版本，一种简单的排序方法是使用“ $ index ”。

 <ul>
  <li ng-repeat="friend in friends|orderBy:$index:true">{{friend.name}}</li>
</ul>

view demo

Answer 9

在Angular中使用.NET中的MVC时，在执行db查询时总是可以使用OrderByDecending（）：

var reversedList = dbContext.GetAll().OrderByDecending(x => x.Id).ToList();

然后在Angular方面，它已经在某些浏览器（IE）中被颠倒了。支持Chrome和FF时，您需要添加orderBy：

<tr ng-repeat="item in items | orderBy:'-Id'">

在此示例中，您将在.Id属性上按降序排序。如果您正在使用分页，则会变得更复杂，因为只会对第一页进行排序。您需要通过控制器的.js过滤器文件或其他方式处理此问题。

Answer 10

有用的提示：

您可以使用香草Js反转数组：yourarray .reverse（）

注意：反向具有破坏性，因此它将改变您的数组，而不仅是变量。

Answer 11

我添加了一个没人提到的答案。如果有的话，我会尝试让服务器这样做。如果服务器返回大量记录，则客户端过滤可能很危险。因为您可能被迫添加分页。如果您从服务器进行分页，那么订单中的客户端过滤器将位于当前页面中。哪会让最终用户感到困惑。因此，如果您有服务器，则通过调用发送orderby并让服务器返回它。

Answer 12

我自己对此问题感到沮丧，所以我修改了由@Trevor Senior创建的过滤器，因为我遇到了一个问题，我的控制台说它无法使用反向方法。我也想保持对象的完整性，因为这是Angular最初在ng-repeat指令中使用的。在这种情况下，我使用了愚蠢（键）的输入，因为控制台会感到沮丧，说有重复，在我的情况下，我需要跟踪$ index。

过滤：

angular.module('main').filter('reverse', function() {
    return function(stupid, items) {
    var itemss = items.files;
    itemss = itemss.reverse();  
    return items.files = itemss; 
  };
});

HTML： <div ng-repeat="items in items track by $index | reverse: items">

Answer 13

我发现了类似的东西，但我没有使用对象。

这是我的对象解决方案：

添加自定义过滤器：

app.filter('orderObjectBy', function() {
    return function(items, field, reverse){

        var strRef = function (object, reference) {
            function arr_deref(o, ref, i) {
                return !ref ? o : (o[ref.slice(0, i ? -1 : ref.length)]);
            }
            function dot_deref(o, ref) {
                return !ref ? o : ref.split('[').reduce(arr_deref, o);
            }
            return reference.split('.').reduce(dot_deref, object);
        };

        var filtered = [];

        angular.forEach(items, function(item) {
           filtered.push(item);
        });
        filtered.sort(function (a, b) {
           return (strRef(a, field) > strRef(a, field) ? 1 : -1);
        });
        if(reverse) filtered.reverse();
        return filtered;
    };
});

然后可以像

一样使用

<div ng-repeat="(key, value) in items | orderObjectBy:'field.any.deep':true">

如果您需要旧的浏览器支持，则需要定义reduce功能（这仅适用于ECMA-262 mozilla.org）

// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(callback /*, initialValue*/) {
'use strict';
  if (this == null) {
    throw new TypeError('Array.prototype.reduce called on null or undefined');
  }
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  var t = Object(this), len = t.length >>> 0, k = 0, value;
  if (arguments.length == 2) {
    value = arguments[1];
  } else {
    while (k < len && !(k in t)) {
      k++; 
    }
    if (k >= len) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    value = t[k++];
  }
  for (; k < len; k++) {
    if (k in t) {
      value = callback(value, t[k], k, t);
    }
  }
  return value;
};
}

Answer 14

orderBy过滤器从Angular 1.4.5开始执行stable sorting。（参见GitHub拉取请求https://github.com/angular/angular.js/pull/12408。）

因此，使用常量谓词并将reverse设置为true就足够了：

<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>

Answer 15

那是因为你正在使用JSON对象。当您遇到此类问题时，请将JSON对象更改为JSON数组对象。

例如，

{"India":"IN","America":"US","United Kingdon":"UK"} json object
[{"country":"India","countryId":"IN"},{"country":"America","countryId":"US"},{"country":"United Kingdon","countryId":"UK"}]

Answer 16

您也可以使用.reverse（）。这是一个原生数组函数

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

Answer 17

我会使用数组本机反向方法提取，总是比创建过滤器或使用$index更好的选择。

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

http://www.example.com/campaign?tfid=8885551212

角度ng-repeat反向

17 个答案: