逆方向の角度ng-repeat
どのように私は角度で逆配列を得ることができますか？私は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>
私はこのようなカスタムフィルタを使うことをお勧めします。
app.filter('reverse', function() {
return function(items) {
return items.slice().reverse();
};
});
これは次のように使うことができます。
<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>
ここでの作業を参照してください。 Plunker Demonstration
このフィルターはあなたのニーズに合うようにカスタマイズできます。デモンストレーションで他の例を示しました。一部のオプションには、逆変換を実行する前に変数が配列であることを確認すること、または文字列などのより多くのことを逆変換できるようにすることをより緩やかにすることが含まれます。
これは私が使用したものです：
<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"
1年後にこれを起動して申し訳ありませんが、がAngular v1.3.0で機能する、新しいより簡単な解決策があります。 -rc.5以降。
これは のドキュメント で言及されています： "プロパティが指定されていない場合（例えば、 '+'）、配列要素自体がどこでのソートを比較するために使われます。したがって、解決策は以下のようになります。
ng-repeat="friend in friends | orderBy:'-'"または
ng-repeat="friend in friends | orderBy:'+':true"
は配列を変更せず、追加の計算リソースを必要としないため（少なくとも私たちのコードでは）、この解決策はより良いようです。私はすべての既存の答えを読みましたが、それでもこの答えを好むのです。
$ indexパラメータで元に戻すことができます
<tr ng-repeat="friend in friends | orderBy:'$index':true">
簡単な解決策： - （メソッドを作成する必要はありません）
ng-repeat = "friend in friends | orderBy: reverse:true"
次のようにあなたのスコープでメソッドを呼び出して逆にすることができます。
<!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は配列のコピーを作成します。
1.3.xを使用している場合は、次のものを使用できます。
{{ orderBy_expression | orderBy : expression : reverse}}
例書籍を出版日順に降順で一覧表示する
<div ng-repeat="book in books|orderBy:'publishedDate':true">
Angularjsバージョン1.4.4以降を使用している場合、ソートする簡単な方法は "$ index"を使用することです。
<ul>
<li ng-repeat="friend in friends|orderBy:$index:true">{{friend.name}}</li>
</ul>
.NETのMVCをAngularと一緒に使用するときは、このように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フィルタファイル、または他の方法でこれを扱う必要があるでしょう。
私はこのようなものを見つけました、しかし配列の代わりに私はオブジェクトを使います。
これがオブジェクトに対する私の解決策です：
カスタムフィルタを追加します。
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;
};
}
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"}]
orderByフィルタはAngular 1.4.5以降で 安定ソート を実行します。 （GitHub pull request https://github.com/angular/angular.js/pull/12408 を参照してください。）
そのため、定数述語を使用し、reverseをtrueに設定するだけで十分です。
<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>
誰も言及していないという答えを1つ追加しています。あなたが持っているなら、私はサーバーにそれをさせるようにするでしょう。サーバーが大量のレコードを返す場合、クライアント側のフィルタリングは危険な場合があります。ページングを追加することを余儀なくされるかもしれないので。あなたがサーバーからページングをしているならば、順番にクライアントフィルターは、現在のページになるでしょう。これはエンドユーザーを混乱させるでしょう。あなたがサーバーを持っているのであれば、それからコールと一緒にorderbyを送信し、サーバーにそれを返させます。
私は自分自身でこの問題に不満を抱いていたので、私は自分のコンソールで問題に遭遇したときに@Trevor Seniorによって作成されたフィルタを修正しました。これもAngularが元々ng-repeatディレクティブで使用しているものなので、私もオブジェクトの整合性を保ちたかったのです。この場合私はstupid（key）の入力を使いました。コンソールが重複していると言って動揺し、私の場合は$ 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">
役に立つヒント：
あなたはバニラJsと配列を逆にすることができます：yourarray。reverse（）
注意：reverseは破壊的なので、変数だけではなく配列も変更されます。
.reverse（）を使うこともできます。ネイティブの配列関数です
<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>