web-dev-qa-db-ja.com

orderByで複数のフィールド Angular

角度で同時に複数のフィールドを使用してソートする方法例ではグループごとに、次にサブグループごとに

$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'" />
javascriptangularjssortingangularjs-ng-repeatangularjs-orderby
361
gmeka

これを見てください。

http://jsfiddle.net/JSWorld/Hp4W7/32/

<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>
626
Sabarish Sankar

あなたがコントローラ内の複数のフィールドでソートしたい場合はこれを使用してください

$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);

https://docs.angularjs.org/api/ng/filter/orderBy も参照してください。

45
Muhammad Raza Dar
<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:['group','sub']" />

複数の注文ではなくユーザー配列

21
Thambuleena

並べ替えは、 'orderBy'フィルタを角度で使用して実行できます。

2つの方法：1.ビューから2.コントローラから

  1. ビューから

構文：

{{array | orderBy : expression : reverse}}

例えば：

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>
  1. コントローラーから

構文：

$filter.orderBy(array, expression, reverse);

例えば：

$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);
5
Tessy Thomas

AngularJsフィルタを実行する方法は2つあります。1つはHTMLで{{}}を使用する方法、もう1つは実際のJSファイルで使用する方法です。

次のようにして問題を解決できます。

{{ Expression | orderBy : expression : reverse}}

あなたがHTMLでそれを使うか、またはのような何かを使うならば：

$filter('orderBy')(yourArray, yourExpression, reverse)

逆引きは最後にオプションで、真偽値を受け取り、それが真ならば配列を逆にします。非常に便利な方法で配列を逆にします。

5
Alireza

ソート用のパイプを作成しました。文字列と文字列の配列の両方を受け入れ、複数の値でソートします。 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
            }
        });
    }
}
0
Andris

オブジェクトの複数の列/プロパティでソートするためにこの便利な部分を書きました。列をクリックするたびに、最後にクリックされた列が格納され、クリックされた列の文字列名のリストに追加されて、sortArrayという配列に配置されます。組み込みAngular "orderBy"フィルタは単純にsortArrayリストを読み取り、そこに格納されている列名の順序で列を並べ替えます。そのため、最後にクリックされた列名が1次の順序付けフィルタになり、前の列名が優先順位の高い順にクリックされます。逆の順序はすべての列の順序に影響します。

<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">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('fish');sortReverse1=!sortReverse1">FISH<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('tastiness');sortReverse1=!sortReverse1">TASTINESS<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</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>
0
Stokely