각도에서 여러 필드를 동시에 사용하여 정렬하는 방법은 무엇입니까? 예를 들어 그룹 별 및 하위 그룹 별 주먹
$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']);답변
<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:['group','sub']" />여러 orderBY 대신 사용자 배열
답변
각도에서 ‘orderBy’필터를 사용하여 정렬을 수행 할 수 있습니다.
두 가지 방법 : 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 필터를 수행하는 두 가지 방법이 있습니다. 하나는 {{}}을 사용하는 HTML과 하나는 실제 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
}
});
}
}