230

angularで逆配列を取得するにはどうすればよいですか? 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>
4

17 に答える 17

333

次のようなカスタム フィルターを使用することをお勧めします。

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

これは次のように使用できます。

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

ここで動作を確認してください: Plunker デモンストレーション


このフィルターは、ニーズに合わせてカスタマイズできます。デモンストレーションで他の例を提供しました。いくつかのオプションには、リバースを実行する前に変数が配列であることを確認することや、文字列などのより多くのものをリバースできるように寛大にすることが含まれます。

于 2013-03-07T09:42:22.787 に答える
206

これは私が使用したものです:

<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:'-'"

また

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

https://stackoverflow.com/a/26635708/1782470から

于 2014-04-12T13:23:31.223 に答える
57

簡単な解決策:- (メソッドを作成する必要はありません)

ng-repeat = "friend in friends | orderBy: reverse:true"
于 2016-10-03T09:04:13.813 に答える
54

$index パラメータで元に戻すことができます

<tr ng-repeat="friend in friends | orderBy:'$index':true">
于 2013-09-22T18:01:19.510 に答える
17

次のように、スコープでメソッドを呼び出して逆にすることができます。

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

于 2013-03-07T09:10:58.967 に答える
11

angularjsバージョン 1.4.4以降を使用している場合、ソートする簡単な方法は「$index」を使用することです。

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

デモを見る

于 2016-06-02T13:36:24.227 に答える
1

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 フィルター ファイルを介して、または他の方法で処理する必要があります。

于 2017-02-14T00:42:19.543 に答える
0

orderByフィルターは、Angular 1.4.5 の時点で安定した並べ替えを実行します。(GitHub プル リクエストhttps://github.com/angular/angular.js/pull/12408を参照してください。)

したがって、定数述語を使用して次のようにreverse設定するだけで十分trueです。

<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>
于 2016-02-14T20:12:28.020 に答える
0

.reverse() も使用できます。ネイティブの配列関数です

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

于 2015-08-14T12:31:38.537 に答える
0

このようなものを見つけましたが、配列の代わりにオブジェクトを使用しています。

オブジェクトに対する私の解決策は次のとおりです。

カスタム フィルターを追加します。

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;
};
}
于 2016-04-26T14:05:54.970 に答える
0

これは、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"}] 
于 2016-02-06T08:23:12.490 に答える
-2

フィルターを作成したり、$index.

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

Plnkr_demo .

于 2015-09-14T13:40:13.607 に答える