#javascript #angular #typescript #toggle
#javascript #угловой #typescript #переключить
Вопрос:
Я пытаюсь выполнить сортировку в заголовке таблицы. Я могу использовать это https://stackblitz.com/edit/angular-sort-filter но я хотел добавить стрелки при нажатии на заголовок (asc / desc) или, может быть, класс для переключения, который я могу сделать из css.
sort(property) {
this.isDesc = !this.isDesc; //change the direction
this.column = property;
let direction = this.isDesc ? 1 : -1;
this.records.sort(function (a, b) {
if (a[property] < b[property]) {
return -1 * direction;
}
else if (a[property] > b[property]) {
return 1 * direction;
}
else {
return 0;
}
});
};
Спасибо за вашу помощь.
С Новым годом!
Комментарии:
1. Я не понимаю, какое отношение этот код имеет к стрелкам.
2. Если вы хотите стрелки. Вы могли бы использовать такой сервис, как fontawesome. У них есть хороший выбор бесплатных значков. И вы могли бы вставить их прямо в свой html. fontawesome.com/icons ? d = галерея amp; q= стрелка
Ответ №1:
В css:
.pointer.active.desc:after {
content: "▲";
}
.pointer.active.asc:after {
content: "▼";
}
В шаблоне:
<div class="form-group">
<div class="col-md-6">
<input type="text" [(ngModel)]="searchText"
class="form-control" placeholder="Search By Category" />
</div>
</div>
<div class="col-md-12">
<table class="table table-responsive table-hover">
<tr>
<th [ngClass]="{pointer: true, active:column=='CategoryID',desc:isDesc, asc:!isDesc}"
(click)="sort('CategoryID')">
Category ID</th>
<th [ngClass]="{pointer: true, active:column=='CategoryName',desc:isDesc, asc:!isDesc}"
(click)="sort('CategoryName')">
Category</th>
<th [ngClass]="{pointer: true, active:column=='Description',desc:isDesc, asc:!isDesc}"
(click)="sort('Description')">
Description</th>
</tr>
<tr *ngFor="let item of records | category : searchText">
<td>{{item.CategoryID}}</td>
<td>{{item.CategoryName}}</td>
<td>{{item.Description}}</td>
</tr>
</table>
</div>
Ответ №2:
Вы можете создать метод, чтобы получить правильный символ для ваших заголовков
В вашем классе создайте этот метод:
arrow(columnName) {
if (this.column === columnName) {
return this.isDesc ? 'amp;#8593;' : 'amp;#8595;';
}
return '';
}
В вашем шаблоне измените каждый заголовок так, чтобы он выглядел следующим образом:
<th class="pointer" (click)="sort('CategoryID')">
Category ID
<span [innerHTML]="arrow('CategoryID')"></span>
</th>
то же самое для каждого заголовка