Таблиците са един от често срещаните елементи, използвани в HTML при работа с уеб страници.
Таблиците в HTML са проектирани с помощта на HTML таг
таг - Това е основният таг, използван за показване на таблицата.
- Този маркер се използва за разделяне на редовете в таблицата.
- Този маркер се използва за показване на действителните данни от таблицата.
- Това се използва за данните на заглавката на таблицата.
Използвайки горните налични HTML тагове заедно с AngularJS, можем да улесним попълването на данните от таблицата. Накратко, директивата ng-repeat се използва за попълване на данните в таблицата.
Ще разгледаме как да постигнем това по време на тази глава. Също така ще разгледаме как можем да използваме филтрите orderby и главни букви заедно с използването на атрибута $ index за показване на индекси на ъглова таблица.
В този урок ще научите -
Попълване и показване на данни в таблица
Вграден филтър AngularJS
Сортирай таблица с OrderBy чрез филтър
Показване на таблица с главни букви
Показване на индекса на таблицата ($ индекс)
Попълване и показване на данни в таблица
Както обсъдихме във въведението към тази глава, основата за създаване на структура на таблицата в HTML страница остава същата.
Структурата на таблицата все още се създава, използвайки нормалните HTML тагове на
,
,
и
. Данните обаче се попълват с помощта на директивата ng-repeat в AngularJS.
Нека да разгледаме прост пример за това как можем да приложим Angular таблици.
В този пример
Ще създадем ъглова таблица, която ще съдържа теми на курса заедно с техните описания.
Стъпка 1) Първо ще добавим таг "style" към нашата HTML страница, за да може таблицата да се показва като подходяща таблица.
Маркерът за стил се добавя към HTML страницата. Това е стандартният начин за добавяне на всякакви атрибути за форматиране, които са необходими за HTML елементи.
Добавяме две стойности на стил към нашата таблица.
Единият е, че трябва да има плътна граница за нашата ъглова таблица и
Второто е, че трябва да има подплата за нашите данни за ъгловата таблица.
Стъпка 2) Следващата стъпка е да напишете кода за генериране на таблицата и нейните данни.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Обяснение на кода:
Първо създаваме променлива, наречена "tutorial", и й задаваме няколко двойки ключ-стойност в една стъпка. Всяка двойка ключ-стойност ще се използва като данни при показване на таблицата. След това променливата на урока се присвоява на обекта на обхвата, за да може да бъде достъпен от нашия изглед.
Това е първата стъпка в създаването на таблица и ние използваме маркера
.
За всеки ред данни използваме "директивата ng-repeat". Тази директива преминава през всяка двойка ключ-стойност в обекта tuto, rial scope, като използва променливата ptutor.
И накрая, използваме маркера
, заедно с двойките ключ-стойност (ptutor.Name и ptutor.Description), за да покажем данните от ъгловата таблица.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От горния изход,
Можем да видим, че таблицата се показва правилно с данните от масива от двойки ключ-стойност, дефинирани в контролера.
Данните в таблицата са генерирани чрез преминаване през всяка от двойките ключ-стойност с помощта на "директивата ng-repeat".
Вграден филтър AngularJS
Много често се използва вградените филтри в AngularJS, за да промените начина на показване на данните в таблиците. Вече видяхме филтри в действие в по-ранна глава. Нека направим кратко обобщение на филтрите, преди да продължим напред.
В Angular.JS филтрите се използват за форматиране на стойността на израза, преди той да бъде показан на потребителя. Пример за филтър е филтърът „главни букви“, който приема изходен низ и форматира низа и показва всички символи в низа като главни букви.
Така че в примера по-долу, ако стойността на променливата „TutorialName“ е „AngularJS“, изходът на израза по-долу ще бъде „ANGULARJS“.
{{TurotialName | Главна буква }}
В този раздел ще разгледаме как филтрите orderBy и главни букви могат да се използват в таблици по-подробно.
Сортирай таблица с OrderBy чрез филтър
Този филтър се използва за сортиране на таблицата въз основа на една от колоните на таблицата. В предишния пример изходът за нашите данни от ъгловата таблица се появи, както е показано по-долу.
Контролери
Контролери в действие
Модели
Модели и данни за обвързване
Директиви
Гъвкавост на директивите
Нека разгледаме пример за това как можем да използваме филтъра „orderBy“ и да сортираме данните от ъгловата таблица, като използваме първата колона в таблицата.
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 може да стане неотзивчива и оттам понякога цялата страница да не реагира. В такъв случай винаги е по-добре да имаме разбивка на страници, в която редовете от данни са разпределени на множество страници.
