Таблицы - один из распространенных элементов, используемых в HTML при работе с веб-страницами.
Таблицы в HTML создаются с использованием тега HTML.
Тег
- это основной тег, используемый для отображения таблицы.
- этот тег используется для разделения строк в таблице.
- этот тег используется для отображения фактических данных таблицы.
- используется для данных заголовка таблицы.
Используя указанные выше теги HTML вместе с AngularJS, мы можем упростить заполнение данных таблицы. Короче говоря, директива ng-repeat используется для заполнения табличных данных.
В этой главе мы рассмотрим, как этого добиться. Мы также рассмотрим, как мы можем использовать фильтры orderby и uppercase вместе с атрибутом $ index для отображения индексов таблиц Angular.
В этом руководстве вы узнаете:
Заполнение и отображение данных в таблице
Встроенный фильтр AngularJS
Сортировка таблицы с помощью фильтра OrderBy
Показать таблицу с фильтром в верхнем регистре
Отображение индекса таблицы ($ index)
Заполнение и отображение данных в таблице
Как мы обсуждали во введении к этой главе, основа для создания структуры таблицы на странице HTML остается прежней.
Структура таблицы по-прежнему создается с использованием обычных HTML-тегов
,
,
и
. Однако данные заполняются с помощью директивы ng-repeat в AngularJS.
Давайте посмотрим на простой пример того, как мы можем реализовать таблицы Angular.
В этом примере
Мы собираемся создать таблицу Angular, в которой будут темы курса вместе с их описанием.
Шаг 1) Сначала мы добавим тег «style» на нашу HTML-страницу, чтобы таблица могла отображаться как правильная таблица.
Тег стиля добавляется на HTML-страницу. Это стандартный способ добавления любых атрибутов форматирования, необходимых для элементов HTML.
Мы добавляем в нашу таблицу два значения стиля.
Во-первых, у нашей таблицы Angular должна быть сплошная граница и
Во-вторых, для данных таблицы Angular должно быть добавлено заполнение.
Шаг 2) Следующим шагом является написание кода для создания таблицы и ее данных.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Пояснение к коду:
Сначала мы создаем переменную под названием «учебник» и назначаем ей несколько пар ключ-значение за один шаг. Каждая пара "ключ-значение" будет использоваться в качестве данных при отображении таблицы. Затем учебная переменная присваивается объекту области видимости, чтобы к нему можно было получить доступ из нашего представления.
Это первый шаг в создании таблицы, и мы используем тег
.
Для каждой строки данных мы используем «директиву ng-repeat». Эта директива проходит через каждую пару «ключ-значение» в объекте области видимости tuto, rial с помощью переменной ptutor.
Наконец, мы используем тег
вместе с парами ключ-значение (ptutor.Name и ptutor.Description) для отображения данных таблицы Angular.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
Из приведенного выше вывода
Мы видим, что таблица отображается правильно с данными из массива пар ключ-значение, определенного в контроллере.
Табличные данные были сгенерированы путем перебора каждой из пар ключ-значение с использованием «директивы ng-repeat».
Встроенный фильтр AngularJS
Очень часто используются встроенные фильтры в AngularJS для изменения способа отображения данных в таблицах. Мы уже видели фильтры в действии в предыдущей главе. Давайте сделаем краткий обзор фильтров, прежде чем мы продолжим.
В Angular.JS фильтры используются для форматирования значения выражения перед его отображением пользователю. Примером фильтра является фильтр «верхнего регистра», который принимает строковый вывод, форматирует строку и отображает все символы в строке в верхнем регистре.
Итак, в приведенном ниже примере, если значение переменной «TutorialName» равно «AngularJS», вывод следующего выражения будет «ANGULARJS».
{{TurotialName | верхний регистр }}
В этом разделе мы более подробно рассмотрим, как фильтры orderBy и uppercase могут использоваться в таблицах.
Сортировка таблицы с помощью фильтра OrderBy
Этот фильтр используется для сортировки таблицы по одному из столбцов таблицы. В предыдущем примере выходные данные нашей таблицы Angular выглядели так, как показано ниже.
Контроллеры
Контроллеры в действии
Модели
Модели и данные привязки
Директивы
Гибкость директив
Давайте рассмотрим пример того, как мы можем использовать фильтр «orderBy» и сортировать данные таблицы Angular, используя первый столбец в таблице.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Пояснение к коду:
Мы используем тот же код, что и для создания нашей таблицы, с той лишь разницей, что на этот раз мы используем фильтр «orderBy» вместе с директивой ng-repeat. В данном случае мы говорим, что хотим упорядочить таблицу по ключу «Имя».
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
На выходе
Мы видим, что данные в таблице Angular отсортированы в соответствии с данными в первом столбце. В нашем наборе данных данные «Директивы» берутся из данных «Модели», но поскольку мы применили фильтр orderBy, таблицы сортируются соответствующим образом.
Показать таблицу с фильтром в верхнем регистре
Мы также можем использовать фильтр верхнего регистра, чтобы изменить данные в таблице Angular на верхний регистр.
Давайте посмотрим на пример того, как мы можем этого добиться.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Пояснение к коду:
Мы используем тот же код, что и для создания нашей таблицы, с той лишь разницей, что на этот раз мы используем фильтр верхнего регистра. Мы используем этот фильтр вместе с «ptutor.Name», чтобы весь текст в первом столбце отображался в верхнем регистре.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
На выходе
Мы видим, что при использовании фильтра «верхнего регистра» все данные в первом столбце отображаются с прописными буквами.
Отображение индекса таблицы ($ index)
Чтобы отобразить индекс таблицы, добавьте
с $ index.
Давайте посмотрим на пример того, как мы можем этого добиться.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Пояснение к коду:
Мы используем тот же код, что и для создания нашей таблицы, с той лишь разницей, что на этот раз мы добавляем дополнительную строку в нашу таблицу для отображения столбца индекса.
В этом дополнительном столбце мы используем свойство «$ index», предоставляемое AngularJS, а затем с помощью оператора +1 увеличиваем индекс для каждой строки.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
На выходе
Вы можете видеть, что был создан дополнительный столбец. В этом столбце мы видим, какие индексы создаются для каждой строки.
Резюме:
Структуры таблиц создаются с использованием стандартных тегов, доступных в HTML. Данные в таблице заполняются с помощью директивы «ng-repeat».
Фильтр orderBy можно использовать для сортировки таблицы по любому столбцу в таблице.
Фильтр верхнего регистра можно использовать для отображения данных в любом текстовом столбце в верхнем регистре.
Свойство «$ index» можно использовать для создания индекса для таблицы.
Одной из распространенных проблем, возникающих при разработке таблиц AngularJS.JS, является реализация больших наборов данных, содержащих более 1000 строк данных. Иногда директива ng-repeat может перестать отвечать, и, следовательно, время от времени перестает отвечать вся страница. В таком случае всегда лучше иметь разбивку на страницы, в которой строки данных распределены по нескольким страницам.
