Пользовательский заказ с использованием orderBy в ng-repeat
У меня есть такие объекты:
students = {name: 'Aa_Student', class: 'A_Class'},
{name: 'Ab_Student', class: 'A_Class'},
{name: 'Ac_Student', class: 'B_Class'},
{name: 'Ba_Student', class: 'B_Class'},
{name: 'Bb_Student', class: 'C_Class'},
{name: 'Bc_Student', class: 'C_Class'}
Предположим, что объект студентов перетасован. Я использую ng-repeat для отображения данных. Я хочу сортировать объекты в пользовательском порядке.
Например, я хочу показать данные следующим образом:
Name Class
-----------------------------
Ac_Student B_Class
Ba_Student B_Class
Aa_Student A_Class
Ab_Student A_Class
Bb_Student C_Class
Bc_Student C_Class
Итак, в основном, я хочу заказать класс ученика, но сначала он B_Class, затем A_Class, затем C_Class. Кроме того, я хочу заказать по имени студентов в алфавитном порядке. Как я могу это сделать?
HTML:
<table>
<tr ng-repeat="student in students | orderBy:customOrder">
...
</tr>
</table>
Контроллер:
$scope.customOrder = function(student) {
$scope.students = $filter('orderBy')(student, function() {
});
};
Ответы
Ответ 1
Привет, вы можете создать собственный фильтр сортировки, см. здесь http://jsbin.com/lizesuli/1/edit
html:
<p ng-repeat="s in students |customSorter:'class'">{{s.name}} - {{s.class}} </p>
</div>
angularjs filter:
app.filter('customSorter', function() {
function CustomOrder(item) {
switch(item) {
case 'A_Class':
return 2;
case 'B_Class':
return 1;
case 'C_Class':
return 3;
}
}
return function(items, field) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (CustomOrder(a.class) > CustomOrder(b.class) ? 1 : -1);
});
return filtered;
};
});
Ответ 2
Знайте, что это старо, но может пригодиться другим...
Вы также можете создать простую пользовательскую функцию сортировки. "Не совсем фильтр":
$scope.customOrder = function (item) {
switch (item) {
case 'A_Class':
return 2;
case 'B_Class':
return 1;
case 'C_Class':
return 3;
}
};
И затем используйте, как вы хотели:
<table>
<tr ng-repeat="student in students | orderBy:customOrder">
...
</tr>
Ответ 3
чтобы установить orderBy
как свойство объектов, просто укажите это имя свойства в разметке:
ng-repeat="student in students |orderBy:'name' | orderBy:'class'"
DEMO