Таблиці - один із найпоширеніших елементів, що використовуються в HTML при роботі з веб-сторінками.
Таблиці в HTML розробляються за допомогою тегу HTML
тег
- це основний тег, який використовується для відображення таблиці.
- Цей тег використовується для розділення рядків у таблиці.
- Цей тег використовується для відображення фактичних даних таблиці.
- Це використовується для даних заголовка таблиці.
Використовуючи вищезазначені доступні теги HTML разом із AngularJS, ми можемо спростити заповнення даних таблиці. Коротше, директива ng-repeat використовується для заповнення даних таблиці.
Про те, як цього досягти, ми розглянемо у цій главі. Ми також розглянемо, як ми можемо використовувати фільтри orderby та верхній регістр разом із використанням атрибута $ index для відображення індексів таблиці Angular.
У цьому підручнику ви дізнаєтесь-
Заповнення та відображення даних у таблиці
Вбудований фільтр AngularJS
Сортувати таблицю з замовленням за допомогою фільтра
Відображення таблиці з великим фільтром
Відображення табличного індексу ($ індекс)
Заповнення та відображення даних у таблиці
Як ми обговорювали у вступі до цього розділу, основа для створення структури таблиці на HTML-сторінці залишається незмінною.
Структура таблиці все ще створюється з використанням звичайних HTML-тегів
,
,
і
. Однак дані заповнюються за допомогою директиви ng-repeat у AngularJS.
Давайте розглянемо простий приклад того, як ми можемо реалізувати таблиці Angular.
У цьому прикладі
Ми збираємося створити кутову таблицю, яка буде містити теми курсу разом з їх описом.
Крок 1) Спочатку ми збираємося додати тег "style" на нашу HTML-сторінку, щоб таблиця могла відображатися як належна таблиця.
Тег стилю додається на сторінку HTML. Це стандартний спосіб додавання будь-яких атрибутів форматування, необхідних для елементів HTML.
Ми додаємо до нашої таблиці два значення стилю.
Одне з них полягає в тому, що для нашої кутової таблиці і повинна бути суцільна межа
По-друге, для даних нашої таблиці Angular має бути встановлено заповнення.
Крок 2) Наступним кроком є написання коду для створення таблиці та її даних.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Пояснення коду:
Спочатку ми створюємо змінну під назвою "tutorial" і присвоюємо їй кілька пар ключ-значення за один крок. Кожна пара ключ-значення використовуватиметься як дані при відображенні таблиці. Потім змінна навчального посібника призначається об’єкту сфери, щоб він міг отримати доступ з нашого погляду.
Це перший крок у створенні таблиці, і ми використовуємо тег
.
Для кожного рядка даних ми використовуємо "директиву ng-repeat". Ця директива проходить через кожну пару ключ-значення в об'єкті tuto, rial scope, використовуючи змінну ptutor.
Нарешті, ми використовуємо тег
разом з парами ключ-значення (ptutor.Name та ptutor.Description) для відображення даних таблиці Angular.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З вищенаведеного виводу,
Ми бачимо, що таблиця відображається правильно з даними з масиву пар ключ-значення, визначених у контролері.
Дані таблиці були сформовані шляхом перегляду кожної з пар ключ-значення за допомогою "директиви ng-repeat".
Вбудований фільтр AngularJS
Дуже поширене використання вбудованих фільтрів в AngularJS для зміни способу відображення даних у таблицях. Ми вже бачили фільтри в дії в попередній главі. Давайте швидко переглянемо фільтри, перш ніж продовжувати.
У Angular.JS фільтри використовуються для форматування значення виразу перед його відображенням користувачеві. Прикладом фільтра є фільтр "верхнього регістру", який приймає вихідний рядок, форматує рядок і відображає всі символи у рядку як великі.
Отже, у наведеному нижче прикладі, якщо значенням змінної 'TutorialName' є 'AngularJS', результатом наведеного нижче виразу буде 'ANGULARJS'.
{{TurotialName | великі регістри}}
У цьому розділі ми розглянемо, як можна більш детально використовувати таблиці 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.
Давайте розглянемо приклад того, як ми можемо цього досягти.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Пояснення коду:
Ми використовуємо той самий код, що і для створення нашої таблиці, єдиною відмінністю цього разу є те, що ми додаємо додатковий рядок до нашої таблиці для відображення стовпця індексу.
У цьому додатковому стовпці ми використовуємо властивість "$ index", надану AngularJS, а потім використовуємо оператор +1 для збільшення індексу для кожного рядка.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З виходу,
Ви бачите, що створено додатковий стовпець. У цьому стовпці ми бачимо індекси, що створюються для кожного рядка.
Короткий зміст:
Структури таблиць створюються за допомогою стандартних тегів, доступних в HTML. Дані в таблиці заповнюються за допомогою директиви "ng-repeat".
Фільтр orderBy можна використовувати для сортування таблиці на основі будь-якого стовпця в таблиці.
Фільтр верхнього регістру можна використовувати для відображення даних у будь-якому текстовому стовпці у верхньому регістрі.
Властивість "$ index" можна використовувати для створення індексу для таблиці.
Однією з найпоширеніших проблем, що виникають під час розробки таблиць AngularJS.JS, є реалізація великих наборів даних, що містить понад 1000 рядків даних. Іноді директива ng-repeat може не реагувати, а отже, вся сторінка часом не реагує. У такому випадку завжди краще мати пагінацію, в якій рядки даних розподіляються на декількох сторінках.
