Таблица AngularJS: сортировка с помощью orderBy и фильтра по верхнему регистру.

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

⚡ Умное резюме

Сортировка, упорядочивание и форматирование текста в таблицах AngularJS основаны на директиве ng-repeat и выражении фильтра. На этой странице показано, как orderBy, uppercase, filter и $index превращают обычную HTML-таблицу в динамическую сетку, управляемую данными.

  • 🧱 Конструкция: Теги table, tr, td и th по-прежнему формируют сетку, поэтому никакая специфическая разметка AngularJS не заменяет стандартный HTML.
  • 🔁 Население: Директива ng-repeat проходит по массиву в объекте scope и выводит одну строку для каждого найденного элемента.
  • 🇧🇷 Сортировка: Фильтр orderBy сортирует строки по любому ключу, а флаг reverse меняет направление сортировки по запросу.
  • 🔤 Форматирование: Фильтр по верхнему регистру преобразует регистр символов в одном столбце, не изменяя при этом базовые данные в контроллере.
  • 🔎 Поиск: Фильтр, привязанный к входному параметру ng-model, сужает видимую область поиска строк по мере ввода текста пользователем.
  • 🔢 Нумерация: Свойство `$index` задает счетчик, отсчитываемый от нуля, поэтому добавление единицы позволяет получить удобочитаемый номер строки.
  • 🚀 Масштаб: При наличии более тысячи строк, используйте оператор limitTo в паре с пагинацией. track для обеспечения адаптивности страницы.
Читать

Таблица AngularJS

Таблицы — один из распространенных элементов HTML, используемых при работе с веб-страницами.

Таблицы в HTML разработаны с использованием HTML-тега

  1. тег – это основной тег, используемый для отображения таблицы.
  2. – Этот тег используется для разделения строк внутри таблицы.
  3. – Этот тег используется для отображения фактических данных таблицы.
  4. – Используется для данных заголовка таблицы.

Используя доступные выше HTML-теги вместе с AngularJS, мы можем упростить заполнение данных таблицы. Короче говоря, директива ng-repeat используется для заполнения данных таблицы.

В этой главе мы рассмотрим, как этого добиться. Мы также рассмотрим, как использовать фильтры orderBy и uppercase, а также атрибут $index для отображения индексов таблиц AngularJS. Первый шаг — это сама разметка.

Заполнение и отображение данных в таблице

Как мы обсуждали во введении к этой главе, основа создания структуры таблицы на странице HTML остается той же.

Структура таблицы по-прежнему создается с использованием обычных HTML-тегов , , и . Однако данные заполняются с помощью директивы ng-repeat в AngularJS.
Рассмотрим простой пример того, как можно реализовать таблицы в AngularJS.
В этом примере

Мы собираемся создать таблицу на AngularJS, в которой будут храниться темы курсов вместе с их описаниями.

Шаг 1) Сначала мы добавим тег «стиль» на нашу HTML-страницу, чтобы таблица отображалась как правильная таблица.

Заполнение и отображение данных в таблице

  1. Тег стиля добавляется на HTML-страницу. Это стандартный способ добавления любых атрибутов форматирования, необходимых для элементов HTML.
  2. Мы добавляем в нашу таблицу два значения стиля.
  • Во-первых, у нашей таблицы AngularJS должна быть сплошная граница, и
  • Во-вторых, необходимо добавить отступы (padding) для данных в таблице AngularJS.

Шаг 2) Следующий шаг — написать код для создания таблицы и ее данных.

Заполнение и отображение данных в таблице

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

⚠️ Предупреждение: Данное объявление воспроизведено в точности так, как было опубликовано, и четыре строки в нем содержат ошибки. chrset орфографические ошибки charsetОдновременно загружаются три сборки AngularJS, что на одну больше, чем нужно. lib/bootstrap.js и lib/bootstrap.css не существуют. Сохраните angular.min.js только.

Code объяснение

  1. Сначала мы создаем переменную под названием «tutorial» и присваиваем ей несколько пар ключ-значение за один шаг. Каждая пара ключ-значение будет использоваться в качестве данных при отображении таблицы. Затем учебная переменная назначается объекту области, чтобы к ней можно было получить доступ с нашего поля зрения.
  2. Это первый шаг в создании таблицы, и мы используем ярлык.
  3. Для каждой строки данных мы используем «директиву ng-repeat». Эта директива проходит через каждую пару ключ-значение в объекте области обучения, используя переменную ptutor.
  4. Наконец, мы используем вместе с парами ключ-значение (ptutor.Name и ptutor.Description) для отображения данных таблицы AngularJS.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Результат

Заполнение и отображение данных в таблице

Из приведенного выше вывода

  • Мы видим, что таблица отображается правильно с данными из массива пар ключ-значение, определенного в контроллере.
  • Данные таблицы были сгенерированы путем обработки каждой пары ключ-значение с использованием «директивы ng-repeat».

Исходные строки — это лишь отправная точка, поскольку фильтры определяют порядок и форматирование этих строк.

Встроенный фильтр AngularJS

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

В AngularJS фильтры используются для форматирования значения выражения перед его отображением пользователю. Примером фильтра является фильтр 'uppercase', который принимает строковый вывод, форматирует строку и отображает все символы в строке в верхнем регистре.

Итак, в приведенном ниже примере, если значение переменной «TutorialName» равно «AngularJS», результатом выражения ниже будет «ANGULARJS».

{{ TutorialName | uppercase }}

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

Распространенные фильтры AngularJS, используемые с таблицами.

В таблице ниже сравниваются фильтры, наиболее часто используемые в выражении ng-repeat.

ФИЛЬТР Цель Пример
Сортировать по Сортирует строки по ключу. | orderBy : 'Name'
фильтр Сохраняет совпадающие строки | filter : searchText
верхний регистр Текст пишется с заглавной буквы. | uppercase
в нижнем регистре Снижает текст | lowercase
limitTo Количество строк с заглавными буквами | limitTo : 25
валюта Форматы денег | currency : '$'
даты Форматы дат | date : 'dd MMM yyyy'
номер Устанавливает количество десятичных знаков | number : 2

Сортировка — это фильтр, который читатели запрашивают в первую очередь, поэтому следующим идет фильтр orderBy.

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

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

Контроллеры Контроллеры в действии
Модели Модели и данные привязки
Директивы Гибкость директив

Рассмотрим пример того, как можно использовать фильтр «orderBy» и сортировать данные таблицы AngularJS по первому столбцу таблицы.

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code объяснение

  1. Мы используем тот же код, что и для создания нашей таблицы, с той лишь разницей, что на этот раз мы используем фильтр «orderBy» вместе с директивой ng-repeat. В данном случае мы говорим, что хотим упорядочить таблицу по ключу «Имя».

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Результат

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

Из вывода,

  • Мы видим, что данные в таблице AngularJS отсортированы в соответствии с данными в первом столбце. Массив объявлен в порядке контроллеры, модели, директивы, поэтому без фильтра строки отображаются в этом порядке. Применение orderBy : 'Name' Эта команда упорядочивает значения Name в алфавитном порядке, в результате чего Directives располагаются перед Models, образуя Controllers, Directives, Models.

Сортировать по Reverse и из заголовков столбцов

Фильтр orderBy принимает второй аргумент. Передача true Изменение направления сортировки позволяет читателю изменить сортировку таблицы, а сохранение ключа и этого флага в области видимости дает возможность пересортировать таблицу, щелкнув заголовок. сортировка по ссылке описывает.

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Изменение порядка сортировки меняет последовательность строк. Следующий фильтр изменяет способ чтения отдельного столбца.

Не пропустите:

Отображение таблицы с фильтром верхнего регистра

Мы также можем использовать фильтр "uppercase", чтобы преобразовать данные в таблице AngularJS в верхний регистр.

Давайте посмотрим на примере, как мы можем этого добиться.

Отображение таблицы с фильтром верхнего регистра

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code объяснение

  1. Мы используем тот же код, что и для создания нашей таблицы, с той лишь разницей, что на этот раз мы используем фильтр верхнего регистра. Мы используем этот фильтр вместе с «ptutor.Name», чтобы весь текст в первом столбце отображался в верхнем регистре.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Результат

Отображение таблицы с фильтром верхнего регистра

Из вывода,

  • Мы видим, что при использовании фильтра «прописные буквы» все данные в первом столбце отображаются с символами верхнего регистра.

Форматирование столбца полезно, и читатели часто хотят видеть рядом с ним номер строки.

Отображение индекса таблицы ($index)

Чтобы отобразить индекс таблицы, добавьте с $index.

Давайте посмотрим на примере, как мы можем этого добиться.

Отображение индекса таблицы

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code объяснение

  1. Мы используем тот же код, что и для создания нашей таблицы, с той лишь разницей, что на этот раз мы добавляем дополнительную строку в нашу таблицу для отображения индексного столбца. В этом дополнительном столбце мы используем свойство «$index». предоставленный AngularJS, а затем с помощью оператора +1 увеличиваем индекс для каждой строки.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Результат

Отображение индекса таблицы

Из вывода,

  • Вы можете видеть, что был создан дополнительный столбец. В этом столбце мы видим индексы, создаваемые для каждой строки.

На одном экране помещаются три строки. Реалистичный набор данных этого не позволяет, поэтому читателям необходим способ поиска по нему.

Как фильтровать и искать данные в таблицах AngularJS

В AngularJS есть фильтр с именем filterЭтот тег, расположенный после ng-repeat, сравнивает каждый элемент массива со значением и сохраняет только соответствующие строки. Привяжите это значение к текстовому полю с помощью ng-model, и таблица будет сужаться по мере ввода текста читателем, без обработчика событий и кода контроллера.

Добавить поиск в реальном времени Box

Добавьте один элемент ввода над таблицей и передайте массив через фильтр. Оба элемента имеют одно и то же свойство области видимости, поэтому AngularJS пересчитывает выражение при каждом нажатии клавиши.

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code Объяснение:

  1. В поле ввода записывается всё, что вводится. searchText в оптическом прицеле.
  2. filter : searchText сохраняет строки, имя которых или Description содержит эту подстроку, регистр не учитывается.
  3. Для поиска по одному столбцу передайте объект: filter : {Name : searchText}.
  4. Цепочка фильтров, поэтому | filter : searchText | orderBy : 'Name' Сначала проводят поиск, а затем отбирают выживших.

Обеспечьте адаптивность больших таблиц.

Одна из распространенных проблем, возникающих при разработке таблиц в AngularJS, — это большие наборы данных, содержащие тысячу и более строк. нг-повторить Директива создает область видимости и наблюдатель для каждой строки, поэтому страница может перестать отвечать. Вместо этого распределите строки по нескольким страницам и добавьте track by Таким образом, существующие строки используются повторно, а не перестраиваются.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

Часто задаваемые вопросы (FAQ)

Для ng-repeat требуется уникальный ключ для каждой строки. Два одинаковых значения вызывают ошибку дублирования. Добавьте свойство distinct или напишите... tracУмножьте значение переменной $index на позицию строки, чтобы в качестве ключа использовалось значение самой строки.

Да. Передайте массив ключей, например, orderBy : ['Name','Description']. AngularJS сортирует по первому ключу, а затем разрешает совпадения по второму. Добавьте перед ключом знак минус, чтобы перевернуть только этот ключ.

Каждая строка, созданная с помощью ng-repeat, отображает логические значения $even и $odd. Привяжите одно из них с помощью ng-class или ng-if, чтобы применить цвет фона, что создаст полосатые строки без каких-либо дополнительных CSS-селекторов для таблицы.

Помощники, такие как Второй пилот GitHub Они быстро создают шаблоны разметки ng-repeat, но всё равно придумывают пути к скриптам и допускают ошибки в написании атрибутов. Проверяйте каждое предложение на соответствие... Справочник фильтров AngularJS перед кораблемping.

Инструменты искусственного интеллекта переписывают ng-repeat как блок управления потоком и перемещают фильтры в каналы или сигналы. Потому что Угловой Встроенных функций сортировки или фильтрации нет, необходимо просматривать каждую сгенерированную сортировку и выполнять поиск вручную.

Подведем итог этой публикации следующим образом: