orderBy Angular의 여러 필드별

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

이거를 보여드리고 싶었는데

group : 서브그룹

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']);

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

여러 주문 B가 아닌 사용자 어레이y

정렬은 'orderBy' 필터를 앵귤러로 사용하여 수행할 수 있습니다.

두 가지 방법: 1뷰 2부터컨트롤러에서

1. 뷰에서

구문:

{{array | orderBy : expression : reverse}} 

예를 들어 다음과 같습니다.

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

2. 컨트롤러에서

구문:

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

예를 들어 다음과 같습니다.

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

AngularJs 필터에는 {{}}을(를) 사용하는 HTML과 실제 JS 파일 두 가지 방법이 있습니다.

다음과 같이 문제를 해결할 수 있습니다.

{{ Expression | orderBy : expression : reverse}}

HTML에서 사용하거나 다음과 같은 것을 사용하는 경우:

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

그 반대는 옵션이며, 부울을 받아들이며, 그것이 참일 경우 어레이를 리버스하는 매우 편리한 방법으로 어레이를 반전시키는 방법은 다음과 같습니다.

여러 개의 열/물성별로 정렬하기 위해 이 편리한 글을 썼습니다.열을 연속으로 클릭할 때마다 코드는 마지막 클릭 열을 저장하고 클릭 열 문자열 이름 목록에 추가하여 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">&#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>

정렬을 위해 파이프를 만들었습니다.문자열과 문자열 배열을 모두 허용하며 여러 값을 기준으로 정렬합니다.각도(각도가 아님)에 대해 작동JS) 문자열과 숫자 정렬을 모두 지원합니다.

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

최종 사용자의 정렬이 복잡하지 않은지 확인하십시오.나는 항상 그룹과 하위 그룹을 분류하는 것은 이해하기 조금 복잡하다고 생각했다.테크니컬 최종 사용자라면 문제가 없을 수 있습니다.

언급URL : https://stackoverflow.com/questions/17037524/orderby-multiple-fields-in-angular