Как я могу разрешить сортировку по таблице данных?

62
6

У меня есть таблица, в которую я зацикливаю данные. Я хотел бы добавить сортировку в заголовок таблицы. Я последовал примеру, который нашел, но, похоже, он не фильтрует таблицу.

Мой компонент HTML:

    <h5 class="table-title">{{title}}</h5>
<table>
<thead>
<tr>
<td ng-click="">Qty</td>
<td>
<a href="#" id="nameSort" ng-click="sortType = 'name'; sortReverse = !sortReverse">Name</a>
<span ng-show="sortType == 'name' && !sortReverse" class="fas fa-sort-down"></span>
<span ng-show="sortType == 'name' && sortReverse" class="fas fa-sort-up"></span>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(name, available) in availability.mappables[0].availability | limitTo: 5" id="{{$index}}" ng-class="{'last': $last}">
<td class="qty">{{available}}</td>
<td class="item" id="{{$last}}">{{name}}</td>
</tr>
</tbody>
</table>

Вот как выглядит мой контроллер:

  $scope.sortType     = 'name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order

$scope.sortBy = function(propertyName) {
$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
$scope.propertyName = propertyName;
};

спросил(а) 2021-01-28T00:49:32+03:00 3 месяца, 1 неделя назад
1
Решение
61

Посмотрите на пример в угловых документах

https://docs.angularjs.org/api/ng/filter/orderBy

Этот пример из документации именно то, что вы ищете:

ng-repeat="friend in friends | orderBy:propertyName:reverse"

https://plnkr.co/edit/55p0yMRLnCm6twXUleHH?p=preview

ответил(а) 2021-01-28T00:49:32+03:00 3 месяца, 1 неделя назад
44

Может быть, вы можете решить эту проблему, используя чистый код JavaScript. Посмотрите на метод sort(). Было бы что-то вроде этого:

    $scope.cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
//sort direction
let direction = true;
function myFunction() {
direction = !direction;
if(direction)
$scope.cars.sort((a, b) => {return a.year - b.year});
else
$scope.cars.sort((a, b) => {return a.year + b.year});
}

ответил(а) 2021-01-28T00:49:32+03:00 3 месяца, 1 неделя назад
44

Да, это должно работать правильно.

ответил(а) 2021-01-28T00:49:32+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема