角度で複数のフィールドを同時に使用して並べ替える方法は？例として、グループごと、次にサブグループごとの拳
$scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1},
{'group':2,'sub':11}];これを次のように表示したかった
1-1
1-2
1-20
2-1
2-10
2-11
<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" />回答:
これを見てください：
http://jsfiddle.net/JSWorld/Hp4W7/32/
<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>コントローラ内の複数のフィールドでソートする場合は、これを使用します
$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);並べ替えは、角度で 'orderBy'フィルターを使用して行うことができます。
2つの方法：1.ビューから2.コントローラーから
構文：
{{array | orderBy : expression : reverse}} 例えば：
<div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>構文：
$filter.orderBy(array, expression, reverse);例えば：
$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);AngularJsフィルターを実行する方法は2つあります。1つは{{}}を使用するHTMLで、もう1つは実際のJSファイルで...
あなたはあなたを使ってあなたの問題を解決することができます：
{{ Expression | orderBy : expression : reverse}}HTMLで使用する場合、または次のようなものを使用する場合：
$filter('orderBy')(yourArray, yourExpression, reverse)逆は最後はオプションであり、ブール値を受け入れ、trueの場合、配列を逆にします。これは、配列を逆にする非常に便利な方法です...
オブジェクトの複数の列/プロパティでソートするためにこの便利な部分を書きました。列が連続してクリックされるたびに、コードは最後にクリックされた列を格納し、クリックされた列文字列名の拡大リストに追加して、sortArrayと呼ばれる配列に配置します。組み込みのAngular "orderBy"フィルターは、単にsortArrayリストを読み取り、そこに格納されている列名の順序で列を並べ替えます。したがって、最後にクリックされた列名が最初に並べられたフィルターになり、前の列が次の列をクリックして優先されます。逆の順序はすべての列の順序に一度に影響し、配列リストセット全体の昇順/降順を切り替えます。
<script>
app.controller('myCtrl', function ($scope) {
$scope.sortArray = ['name'];
$scope.sortReverse1 = false;
$scope.searchProperty1 = '';
$scope.addSort = function (x) {
if ($scope.sortArray.indexOf(x) === -1) {
$scope.sortArray.splice(0,0,x);//add to front
}
else {
$scope.sortArray.splice($scope.sortArray.indexOf(x), 1, x);//remove
$scope.sortArray.splice(0, 0, x);//add to front again
}
};
$scope.sushi = [
{ name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
{ name: 'Philly', fish: 'Tuna', tastiness: 2 },
{ name: 'Tiger', fish: 'Eel', tastiness: 7 },
{ name: 'Rainbow', fish: 'Variety', tastiness: 6 },
{ name: 'Salmon', fish: 'Misc', tastiness: 2 }
];
});
</script>
<table style="border: 2px solid #000;">
<thead>
<tr>
<td><a href="#" ng-click="addSort('name');sortReverse1=!sortReverse1">NAME<span ng-show="sortReverse1==false">▼</span><span ng-show="sortReverse1==true">▲</span></a></td>
<td><a href="#" ng-click="addSort('fish');sortReverse1=!sortReverse1">FISH<span ng-show="sortReverse1==false">▼</span><span ng-show="sortReverse1==true">▲</span></a></td>
<td><a href="#" ng-click="addSort('tastiness');sortReverse1=!sortReverse1">TASTINESS<span ng-show="sortReverse1==false">▼</span><span ng-show="sortReverse1==true">▲</span></a></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in sushi | orderBy:sortArray:sortReverse1 | filter:searchProperty1">
<td>{{ s.name }}</td>
<td>{{ s.fish }}</td>
<td>{{ s.tastiness }}</td>
</tr>
</tbody>
</table>ソート用に作成されたパイプ。文字列と文字列の配列の両方を受け入れ、複数の値でソートします。Angular（AngularJSではない）で動作します。文字列と数値の両方の並べ替えをサポートします。
@Pipe({name: 'orderBy'})
export class OrderBy implements PipeTransform {
transform(array: any[], filter: any): any[] {
if(typeof filter === 'string') {
return this.sortAray(array, filter)
} else {
for (var i = filter.length -1; i >= 0; i--) {
array = this.sortAray(array, filter[i]);
}
return array;
}
}
private sortAray(array, field) {
return array.sort((a, b) => {
if(typeof a[field] !== 'string') {
a[field] !== b[field] ? a[field] < b[field] ? -1 : 1 : 0
} else {
a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 0
}
});
}
}並べ替えがエンドユーザーにとって複雑にならないようにしてください。グループとサブグループでのソートは理解するのが少し複雑だといつも思っていました。技術的なエンドユーザーであれば問題ないかもしれません。
orderBy:['-group','sub']group逆順に並べ替えます。