17) Стол AngularJS

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

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

Тег <table> — это основной тег, используемый для отображения таблицы.
<tr> — Этот тег используется для разделения строк в таблице.
<td> — этот тег используется для отображения фактических данных таблицы.
<th> — используется для данных заголовка таблицы.

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

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

В этом уроке вы узнаете

Заполнение и отображение данных в таблице
AngularJS встроенный фильтр
Таблица сортировки с фильтром OrderBy
Показать таблицу с верхним регистром фильтра
Показать индекс таблицы ($ index)

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

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

Структура таблицы по-прежнему создается с использованием обычных HTML-тегов <table>, <tr>, <td> и <th>. Однако данные заполняются с помощью директивы ng-repeat в AngularJS.

Давайте рассмотрим простой пример того, как мы можем реализовать угловые таблицы.

В этом примере

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

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

Тег стиля добавляется на страницу HTML. Это стандартный способ добавления любых атрибутов форматирования, которые требуются для элементов HTML.
Мы добавляем два значения стиля в нашу таблицу.

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

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

Объяснение кода:

Сначала мы создаем переменную с именем «tutorial» и присваиваем ей несколько пар ключ-значение за один шаг. Каждая пара ключ-значение будет использоваться в качестве данных при отображении таблицы. Затем переменная учебника присваивается объекту области видимости, чтобы к нему можно было получить доступ из нашего представления.
Это первый шаг в создании таблицы, и мы используем тег <table>.
Для каждой строки данных мы используем «директиву ng-repeat». Эта директива проходит через каждую пару ключ-значение в объекте tuto, rial scope с помощью переменной ptutor.
Наконец, мы используем тег <td> вместе с парами ключ-значение (ptutor.Name и ptutor.Description) для отображения данных таблицы углов.

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

Вывод:

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

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

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

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

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

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

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

Таблица сортировки с фильтром OrderBy

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

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

Давайте рассмотрим пример того, как мы можем использовать фильтр «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>

Объяснение кода:

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

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

Вывод:

Из вывода

Мы можем видеть, что данные в угловой таблице были отсортированы в соответствии с данными в первом столбце. В нашем наборе данных данные «Директивы» поступают из данных «Модели», но поскольку мы применили фильтр 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">
            <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>

Объяснение кода:

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

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

Вывод:

Из вывода

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

Показать индекс таблицы ($ index)

Чтобы отобразить индекс таблицы, добавьте <td> с $ 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>

Объяснение кода:

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

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

Вывод:

Из вывода

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

Резюме:

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

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

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

Таблица сортировки с фильтром OrderBy

Показать таблицу с верхним регистром фильтра

Показать индекс таблицы ($ index)

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности