Таблица AngularJS: сортировка, фильтр OrderBy и верхний регистр [Примеры]

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

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

Таблицы в HTML создаются с использованием тега HTML.

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

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

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

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

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

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

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

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

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

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

Шаг 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>

Code объяснение

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

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

Результат

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

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

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

СТАТЬИ ПО ТЕМЕ

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

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

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

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

{{ TurotialName | uppercase }}

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

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

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

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

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

Сортировка таблицы с помощью фильтра 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

Из вывода,

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

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

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

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

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

<!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 увеличиваем индекс для каждой строки.

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

Результат

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

Из вывода,

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

Резюме

  • Структуры таблиц создаются с использованием стандартных тегов, доступных в HTML. Данные в таблице заполняются с помощью директивы «ng-repeat».
  • Фильтр orderBy можно использовать для сортировки таблицы по любому столбцу таблицы.
  • Фильтр верхнего регистра можно использовать для отображения данных в любом текстовом столбце в верхнем регистре.
  • Свойство $index можно использовать для создания индекса таблицы.
  • Одной из распространенных проблем, возникающих при разработке с использованием таблиц AngularJS.JS, является реализация больших наборов данных, содержащих более 1000 строк данных. Иногда нг-повторить Директива может перестать отвечать на запросы, и, следовательно, вся страница иногда перестает отвечать на запросы. В таком случае всегда лучше иметь нумерацию страниц, при которой строки данных распределяются по нескольким страницам.

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