ILLUSTRATION: http://jsfiddle.net/w38E8/4/
Take a look at the example provided above.
CONTROLLER:
function SortCtrl($scope) {
$scope.students = [{
'name': 'AAA',
'year': 'sophomore',
'score': 100,
}, {
'name': 'ABA',
'year': 'freshman',
'score': 70,
}, {
'name': 'ABC',
'year': 'freshman',
'score': 30,
}, {
'name': 'BAA',
'year': 'junior',
'score': 90,
}, {
'name': 'BAB',
'year': 'junior',
'score': 70,
}, {
'name': 'BBA',
'year': 'junior',
'score': 50,
}, {
'name': 'CAA',
'year': 'sophomore',
'score': 30,
}, ];
$scope.sortArr = ['name']; // This array sorts the students
$scope.sortClass = function (field) { // asc:BLUE, desc:RED
var fieldIdx = getIndexInArray(field, $scope.sortArr);
if (fieldIdx > -1) {
return $scope.sortArr[fieldIdx].indexOf('-') > -1 ? 'desc' : 'asc';
}
return '';
};
$scope.changeSort = function (field, $event) {
var fieldIdx = getIndexInArray(field, $scope.sortArr);
if (fieldIdx > -1) {
if ($event.shiftKey) {
} else if ($scope.sortArr.length > 1) {
$scope.sortArr = [field];
fieldIdx = getIndexInArray(field, $scope.sortArr);
}
$scope.sortArr[fieldIdx] = $scope.sortArr[fieldIdx].indexOf('-') > -1 ? $scope.sortArr[fieldIdx].replace('-', '') : '-' + field;
} else {
if ($event.shiftKey) {
$scope.sortArr.push(field);
} else {
$scope.sortArr = [field];
}
}
var length = $scope.sortArr.length;
$scope.students.sort(function (a, b) {
var sortA = '';
var sortB = '';
var fieldA = '';
var fieldB = '';
for (var i = 0; i < length; i++) {
if (field == 'year') {
if (field == $scope.sortArr[i].replace('-', '')) {
fieldA += customOrder(a.year);
fieldB += customOrder(b.year);
} else {
sortA += customOrder(a.year);
sortB += customOrder(b.year);
}
} else {
if (field == $scope.sortArr[i].replace('-', '')) {
fieldA += a[$scope.sortArr[i].replace('-', '')];
fieldB += b[$scope.sortArr[i].replace('-', '')];
} else {
sortA += a[$scope.sortArr[i].replace('-', '')];
sortB += b[$scope.sortArr[i].replace('-', '')];
}
}
}
if (sortA != sortB) {
if (sortA < sortB) return -1;
if (sortA > sortB) return 1;
return 0;
}
if ($scope.sortArr[getIndexInArray(field, $scope.sortArr)].indexOf('-') > -1) return fieldA == fieldB ? 0 : (fieldA < fieldB ? 1 : -1);
else return fieldA == fieldB ? 0 : (fieldA < fieldB ? -1 : 1);
});
};
function getIndexInArray(field, arr) {
var idx = -1;
angular.forEach(arr, function (value, index) {
if (field == value.replace('-', '')) {
idx = index;
}
});
return idx;
};
function customOrder(type) {
switch (type) {
case 'freshman':
return 0;
case 'sophomore':
return 1;
case 'junior':
return 2;
case 'senior':
return 3;
}
};
};
The given example demonstrates how multiple fields can be sorted by holding down the shift key. Additionally, each click on the header changes the order.
The challenge lies in not being able to sort objects YEAR:DESC and then name:ASC. The following snippet seems to be causing the problem:
if (sortA != sortB) {
if (sortA < sortB) return -1;
if (sortA > sortB) return 1;
return 0;
}
I am unsure how to resolve this issue. Any assistance would be greatly appreciated as I have been grappling with this for quite some time!
ILLUSTRATION: http://jsfiddle.net/w38E8/4/