Сортировка и фильтрация таблицы с помощью Angular

angular
image-957

Сегодня мы рассмотрим пути сортировки и фильтрации наших табличных данных. Это общие способы, которые будут вам полезны, так что давайте посмотрим на то, как мы будем создавать такое приложение. Вот демо-версия:

7661

Простое приложение

Наше приложение позволит нам:

  • Вывести таблицу данных (ng-repeat)
  • Сортировать по возрастанию или по убыванию колонки (orderBy)
  • Фильтр с помощью поля поиска (filter)

Это три общие функции которые могут понадобится в любом приложении связанного с таблицей, и Angular позволяет это реализовать очень простым способом.

Настройки

Что мы будем использовать?

Bootstrap and Font Awesome для стилизации нашего приложение, и конечно же AngularJS. У нас будет два файла:

- index.html
- app.js

Вот код app.js:

angular.module('sortApp', [])
.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // значение сортировки по умолчанию
  $scope.sortReverse  = false;  // обратная сортировка
  $scope.searchFish   = '';     // значение поиска по умолчанию
  // список
  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
    { name: 'Philly', fish: 'Tuna', tastiness: 4 },
    { name: 'Tiger', fish: 'Eel', tastiness: 7 },
    { name: 'Rainbow', fish: 'Variety', tastiness: 6 }
  ];

Тут у нас приложение sortApp и его контроллер mainController. Инициализируем три переменные: sortType, sortReverse, searchFish. Так же мы создали объект список суш. Теперь используем этот модуль в нашем HTML шаблоне:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Sort and Filter</title>
    <!-- CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <style>
        body { padding-top:50px; }
    </style>
    <!-- JS -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="sortApp" ng-controller="mainController">
  <div class="alert alert-info">
    <p>Sort Type: {{ sortType }}</p>
    <p>Sort Reverse: {{ sortReverse }}</p>
    <p>Search Query: {{ searchFish }}</p>
  </div>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <td>
            Sushi Roll
        </td>
        <td>
          Fish Type
        </td>
        <td>
          Taste Level
        </td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="roll in sushi">
        <td>{{ roll.name }}</td>
        <td>{{ roll.fish }}</td>
        <td>{{ roll.tastiness }}</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Мы используем ngRepeat для вывода суши, которые мы создали в нашем модуле. Наше приложение теперь будет выглядеть следующим образом:

43b4-Z6AOUg
image-958

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

Сортировка таблицы

Мы будем достигать этой сортировки используя две переменные, которые мы создали ранее ($scope.sortType и $scope.sortReverse). Мы также будем использовать Angular фильтр orderBy. В принципе, используя сочетание переменных sortType и sortReverse к orderBy в нашем ng-repeat таблица будет от сортирована.

<!-- index.html -->
...
    <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse">
...

Это все, что нужно, чтобы изменить порядок сортировки нашего ng-repeat. Если вы обновите страницу, то увидите, что список отсортирован по называют в обычном порядке. Если вы измените в модуле параметры по умолчанию на $scope.sortType = 'fish' или $scope.sortReverse = true; то и сортировка изменится, сортировка будет теперь по полю fish и в обратном порядке.

Создание кликабельных заголовков таблицы

Мы добавим ссылки в наши заголовки таблицы. Давайте посмотрим на thead тег нашего сайта и используем ng-click, чтобы настроить переменную sortType:

...
    <thead>
      <tr>
        <td>
          <a href="#" ng-click="sortType = 'name'">
            Sushi Roll
            <span ng-show="sortType == 'name'" class="fa fa-caret-down"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'fish'">
          <span ng-show="sortType == 'fish'" class="fa fa-caret-down"></span>
          Fish Type
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'tastiness'">
          <span ng-show="sortType == 'tastiness'" class="fa fa-caret-down"></span>
          Taste Level
          </a>
        </td>
      </tr>
    </thead>
...

Теперь, при нажатии на ссылку заголовков таблицы, вы увидите, изменения сортировки.

Изменение порядка сортировки

Следующим шагом будет добавление возможности изменять направление сортировки, так что бы пользователи могли сортировать таблицу по возрастанию или по убыванию. У фильтра orderBy есть третий параметр reverse. Мы просто должны передать true или false, чтобы изменить порядок сортировки. Сейчас значение false, так как мы инциализировали переменную $scope.sortReverse. Мы добавим возможность менять направление сортировки:

...
    <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
...

Теперь, если вы кликните по заголовку, вы увидите изменение порядка сортировки. Давайте добавим знак направления сортировки, для большей наглядности. Мы добавим иконки вверх и вниз, а затем использовать ngShow и ngHide, чтобы показать и скрыть их. Вот как будет выглядеть одна из ссылок:

...
    <td>
      <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
        Sushi Roll
        <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
...

Фильтрация таблицы

Фильтрация данных в ng-repeat довольно легко, так как у Angular есть модуль фильтра. Есть только две вещи, которые мы должны сделать здесь: создать форму и применить переменную формы в ng-repeat. Давайте создадим форму:

  <form>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>
        <input type="text" class="form-control" placeholder="Search da Fish" ng-model="searchFish">
      </div>
    </div>
  </form>

Это обычная Bootstrap форма. Основное тут это ng-model="searchFish" нашего input. searchFish мы будем использовать при фильтрации:

<!-- index.html -->
...
    <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
...

Так наш фильтр будет применен к таблице. Вы также заметите, что orderBy и filter будет работать вместе.

7661

Вывод.

Используя встроенные инструменты Angular, такие как ngRepeat, OrderBy, filter, ngClick и ngShow, мы смогли создать функциональную и быструю таблицу данных. Это один из примеров, когда Angular помогает в создании некоторой функциональности в приложения без лишних затрат.

  • AdminCommentsUser

    Спасибо, работает! Подскажите как при использовании фильтрации здесь пересчитывать количество отфильтрованых элементов?

  • Сергей

    )норм