orderBy nhiều lĩnh vực trong Angular

Làm thế nào để sắp xếp bằng cách sử dụng nhiều trường cùng một lúc trong góc? nắm tay theo nhóm và sau đó theo nhóm phụ

$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}];

Tôi muốn hiển thị cái này như

nhóm: Tiểu nhóm

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

Xin vui lòng xem điều này:

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

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

Nếu bạn muốn sắp xếp trên các trường mulitple bên trong bộ điều khiển, hãy sử dụng cái này

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

Xem thêm https://docs.angularjs.org/api/ng/filter/orderBy

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

Mảng người dùng thay vì nhiều orderBY

Sắp xếp có thể được thực hiện bằng cách sử dụng bộ lọc 'orderBy' theo góc.

Hai cách: 1. Từ chế độ xem 2. Từ bộ điều khiển

1. Từ quan điểm

Cú pháp:

{{array | orderBy : expression : reverse}} 

Ví dụ:

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>

2. Từ bộ điều khiển

Cú pháp:

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

Ví dụ:

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

Có 2 cách thực hiện các bộ lọc AngularJs, một trong HTML sử dụng {{}} và một trong các tệp JS thực tế ...

Bạn có thể giải quyết vấn đề bằng cách sử dụng:

{{ Expression | orderBy : expression : reverse}}

nếu bạn sử dụng nó trong HTML hoặc sử dụng cái gì đó như:

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

Đảo ngược là tùy chọn ở cuối, nó chấp nhận boolean và nếu nó đúng, nó sẽ đảo ngược Array cho bạn, cách rất thuận tiện để đảo ngược Array của bạn ...

Tôi đã viết phần tiện dụng này để sắp xếp theo nhiều cột / thuộc tính của một đối tượng. Với mỗi lần nhấp cột liên tiếp, mã lưu trữ cột cuối cùng được nhấp và thêm nó vào danh sách ngày càng tăng của các tên chuỗi được nhấp, đặt chúng vào một mảng gọi là sortArray. Bộ lọc "orderBy" Angular tích hợp chỉ cần đọc danh sách sortArray và sắp xếp các cột theo thứ tự các tên cột được lưu trữ ở đó. Vì vậy, tên cột được nhấp cuối cùng trở thành bộ lọc theo thứ tự chính, cái trước được nhấp vào thứ tự ưu tiên, v.v ... Thứ tự ngược lại ảnh hưởng đến tất cả các thứ tự cột cùng một lúc và tăng dần / giảm dần cho bộ danh sách mảng hoàn chỉnh:

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

Tạo ống để phân loại. Chấp nhận cả chuỗi và mảng chuỗi, sắp xếp theo nhiều giá trị. Hoạt động cho Angular (không phải AngularJS). Hỗ trợ cả sắp xếp cho chuỗi và số.

@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
            }
        });
    }
}

Đảm bảo rằng việc sắp xếp không quá phức tạp đối với người dùng cuối. Tôi luôn nghĩ sắp xếp theo nhóm và nhóm phụ là một chút phức tạp để hiểu. Nếu nó là người dùng cuối kỹ thuật thì có thể ổn.