我如何能得到一个反向数组在角? 我试图使用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>

你可以在你的作用域上调用一个方法来反转它,像这样:

<!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修改原始数组。


我建议使用这样的自定义过滤器:

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

然后可以这样使用:

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

看它在这里工作:活塞演示


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


您可以通过$index参数进行反转

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

这是我使用的:

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

更新:

对于老版本的Angular,我的答案是OK的。 现在,你应该使用

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

or

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

从https://stackoverflow.com/a/26635708/1782470


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

在文档中提到: “如果没有提供属性,(例如。'+'),然后数组元素本身用于比较排序"。所以,解决方案是:

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

ng-repeat="朋友中的朋友| orderBy:'+':true"

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


如果您使用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


你也可以使用.reverse()。它是一个原生数组函数

<div ngn -repeat=“朋友们的朋友。反向()”>{{朋友}</div>


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

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

Plnkr_demo。


这是因为您使用的是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"}] 

从Angular 1.4.5开始,orderBy过滤器执行稳定的排序。(参见GitHub pull request https://github.com/angular/angular.js/pull/12408)

因此,使用常量谓词和反向设置为true就足够了:

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

我发现了类似这样的东西,但我使用对象而不是数组。

下面是我对对象的解决方案:

添加自定义过滤器:

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;
    };
});

然后可以用like

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

如果你使用的是angularjs 1.4.4及以上版本,一个简单的排序方法是使用"$index"。

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

视图演示


我自己对这个问题感到沮丧,所以我修改了@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="item in items track by $index | reverse: items">


简单解决方案:-(不需要做任何方法)

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

我补充了一个没有人提到的答案。如果你有服务器,我会试着让服务器来做。如果服务器返回大量记录,客户端过滤可能是危险的。因为您可能会被迫添加分页。如果你有来自服务器的分页,那么客户端筛选顺序,将在当前页面。这会让最终用户感到困惑。因此,如果您有一个服务器,那么将订单与调用一起发送,并让服务器返回它。


当你在。net和Angular中使用MVC时,你总是可以像这样使用orderbydescent()来查询你的db:

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

在Angular方面,它在一些浏览器(IE)中已经被反转了。当支持Chrome和FF时,你需要添加orderBy:

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

在本例中,您将对. id属性按降序排序。如果您正在使用分页,这将变得更加复杂,因为只有第一个页面将被排序。你需要通过控制器的.js过滤器文件来处理这个问题,或者以其他方式。


有用的提示:

你可以用普通Js来反转你的数组:

注意:反向是破坏性的,所以它会改变你的数组,而不仅仅是变量。