角度NGリピート逆

227

どのようにして角度付きの反転配列を取得できますか？私は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>
javascript  arrays  angularjs  reverse  angularjs-ng-repeat 
— デルレム
ソース
4
これは新しいと正しい方法のある stackoverflow.com/a/16261373/988830
— om471987
@QuiteNothing式を使用して配列を逆にする場合は、これが正しい方法です。この場合、問題は、アレイなしでアレイをどのように崇拝するかでした。
— JayQuerie.com 2014年
<tr ng-repeat = "friend in friends | orderBy： '-name'">
— desmati
簡単な1行と正しい解決策については、以下の私の回答を参照してください。メソッドを作る必要はありません。なぜ人々はこれのために追加の方法を作っているのでしょうか。
— ムハンマドハッサム2017
ng-repeat動作を変更するには、常にフィルターを使用してください！@Trevorシニアは良い仕事をしました。
— Amir Savand 2017

回答:

329

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

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

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

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

ここでそれが機能するのを見てください：Plunkerのデモ

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

— JayQuerie.com
ソース
21
いいね！items.reverse()新しい配列を作成してそれを返すのではなく、配列を変更することに注意してください。
— Anders Ekdahl 2013年
12
ありがとう！見落としていた。slice()その問題を解決するためにa を投入しました。
— JayQuerie.com 2013年
9
追加if (!angular.isArray(items)) return false;して、配列を元に戻す前に、配列があることを確認する必要があります。
— RespectTheCode
6
nullに対する防御力を高める必要があります。代わりに次を使用する必要があります。items.slice（）。reverse（）：[];
— Chris Yeung
5
@Chris Yeung：nullの場合、空の「[]」を返すことはお勧めしません。元の値を返す方がよい。
— Siva 2014年
202

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

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

— アミット・バクル
ソース
Uing track by、これが私にとってうまくいった唯一の方法
@delboud orderByの後でトラックバイを使用する必要があります：ng-repeat="friend in friends | orderBy:'+': true track by $index"
— Vibhum Bhardwaj 2017
125

1年後にこれを表示して申し訳ありませんが、Angular v1.3.0-rc.5以降で機能する新しい簡単なソリューションがあります。

それはドキュメントで言及されています：「プロパティが提供されない場合（例： '+'）、配列要素自体がソートの場所を比較するために使用されます。」したがって、解決策は次のようになります。

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

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

このソリューションは、配列を変更せず、追加の計算リソースを必要としないため（少なくともこのコードでは）、より良いようです。私はすべての既存の回答を読みましたが、それでもこの回答を好みます。

— ドミトリー・ゴンチャー
ソース
1
先端をありがとう！これを読んでいる他の人に向けて、rc4（v1.3.0-rc.4）ではこれが機能しないようです。誰かが新しいリリースでそれを試す機会を得たら、知らせてください！
— mikermcneil 2014年
1
@mikermcneilコメントありがとうございます！同じドキュメントによると、それはv1.3.0-rc.5（rc.5ドキュメント対rc.4ドキュメント）から機能するはずです。回答を更新しました
— Dmitry Gonchar、
1
私のために働いていません（v1.3.5）。試してみましたorderBy:'+':true、orderBy:'-':true、orderBy:'-':false、orderBy:'+':false:(
— コーディ
2
@Cody回答が遅くなってすみません。ここに行きます-角度v1.3.5 jsfiddle.net/dmitry_gonchar/L98foxhm/1を使用した実際の例。おそらく問題は別の場所にありました。
— Dmitry Gonchar 2015
1
@alevkon True。ただし、フィールド（ '+ id'、 '-id' fe）を指定すると機能します。多分これはAngularのバグであり、フィールドを指定しないと通常の順序では機能しませんか？私はドキュメントからこの方法を採用しました（リンクは回答にあります）ので、あなたと同様に驚きました。とにかく、問題は配列を逆にする方法でした。
— Dmitry Gonchar、2015年
54

$ indexパラメータで逆にすることができます

<tr ng-repeat="friend in friends | orderBy:'$index':true">
— jjhrms
ソース
13
動作するはずですが、動作しません（引用符の前後で引用符なしで試してみました$index）。Angular 1.1.5を使用しています。
— エンジニア
2
私のために働いた（けれども$インデックスの代わりにソートするためのプロパティを使用していた） stackoverflow.com/questions/16261348/...
— サート
4
AngularJS 1.2.13では動作しません。オブジェクトの配列を変更して、各オブジェクトにIDを追加しました。idは、配列内のオブジェクトのインデックスです。その後、ng-repeat="friend in friends | orderBy:'id':true"動作します。
— tanguy_k 14
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。

— アンダース・エクダール
ソース
11

angularjs バージョン1.4.4以降を使用している場合、並べ替える簡単な方法は " $ index " を使用することです。

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

デモを見る

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

— なぜ？
ソース
0

.reverse（）を使用することもできます。ネイティブ配列関数です

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

— Pian0_M4n
ソース
あなたの反対票はただ一つのことを意味することができます：あなたはより多くの入って来るデータを持っています。{}または[]がデータを受信し続ける場合は、明らかに毎回逆になります。新しいダイジェストです
— Pian0_M4n 2015年
これを使用したい人への警告：reverse配列を元に戻し、単に反転したコピーを返すだけではありません。これは、これが評価されるたびに、配列が逆になることを意味します。
— jcaron
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"}]
— user5891403
ソース
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;
};
}
— Twois
ソース
0

私は自分でこの問題に不満を感じていたので、コンソールでリバースメソッドを使用できないという問題が発生しているときに@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">

— コード化されたコンテナ
ソース
0

誰も言及していない答えを1つ追加します。サーバーがある場合は、サーバーにそれを実行させるようにします。サーバーが大量のレコードを返す場合、クライアント側のフィルタリングは危険な場合があります。ページングを追加せざるを得ない場合があるためです。サーバーからページングしている場合、クライアントフィルターは現在のページに表示されます。これはエンドユーザーを混乱させるでしょう。したがって、サーバーがある場合は、orderbyを呼び出して送信し、サーバーがそれを返すようにします。

— イェンス・アレニウス
ソース
0

役立つヒント：

あなたはバニラJSであなたの配列を逆にすることができます：yourarray .reverse（）

注意：逆は破壊的であるため、変数だけでなく配列も変更されます。

— ケビン
ソース
-2

フィルターを作成したり、を使用したりするよりも、配列のネイティブのリバースメソッドを使用する方が常に良い選択$indexです。

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

Plnkr_demo。

— ビシュヌダス・テカレ・クルカルニ
ソース
元の配列を反転しています...反転した新しい配列を返すことをお勧めします。
— Vandervidi 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.