Табеле су један од уобичајених елемената који се користе у ХТМЛ-у при раду са веб страницама.
Табеле у ХТМЛ-у су дизајниране помоћу ХТМЛ ознаке
- ознака <табле> - ово је главна ознака која се користи за приказивање табеле.
- <тр> - Ова ознака се користи за раздвајање редова унутар табеле.
- <тд> - Ова ознака се користи за приказ стварних података табеле.
- <тх> - Ово се користи за податке заглавља табеле.
Користећи горе доступне ХТМЛ ознаке заједно са АнгуларЈС, можемо олакшати попуњавање података табеле. Укратко, директива нг-репеат се користи за попуњавање података табеле.
Како ћемо то постићи, погледаћемо током овог поглавља. Такође ћемо размотрити како можемо да користимо филтере редоследа и велика слова, заједно са атрибутом $ индек за приказ индекса табела Ангулар.
У овом упутству ћете научити-
- Попуните и прикажите податке у табели
- Уграђени филтер АнгуларЈС
- Поредај табелу са филтером ОрдерБи
- Приказ табеле са великим словом
- Прикажи индекс табеле ($ индекс)
Попуните и прикажите податке у табели
Као што смо говорили у уводу овог поглавља, основа за креирање структуре табеле на ХТМЛ страници остаје иста.
Структура табеле се и даље креира користећи уобичајене ХТМЛ ознаке <табле>, <тр>, <тд> и <тх>. Међутим, подаци се попуњавају употребом нг-репеат директиве у АнгуларЈС.
Погледајмо једноставан пример како можемо применити Ангулар табеле.
У овом примеру,
Направићемо кутну табелу која ће садржати теме курса заједно са њиховим описима.
Корак 1) Прво ћемо додати ознаку „стиле“ на нашу ХТМЛ страницу да би табела могла бити приказана као одговарајућа табела.
- Ознака стила додаје се на ХТМЛ страницу. Ово је стандардни начин за додавање било каквих атрибута форматирања који су потребни за ХТМЛ елементе.
- У нашу табелу додајемо две вредности стила.
- Једна је да би за наш Угаони сто требало да постоји чврста ивица
- Друго је да за наше податке табеле угла треба да се постави подлога.
Корак 2) Следећи корак је писање кода за генерисање табеле и њених података.
Event Registration Guru99 Global Event
{{ptutor.Name}} {{ptutor.Description}}
Објашњење кода:
- Прво креирамо променљиву која се назива „туториал“ и додељујемо јој неколико парова кључ / вредност у једном кораку. Сваки пар кључ / вредност користиће се као подаци приликом приказивања табеле. Затим се променљива водича додељује објекту опсега тако да јој се може приступити из нашег погледа.
- Ово је први корак у креирању табеле и користимо ознаку <табле>.
- За сваки ред података користимо „нг-репеат директиву“. Ова директива пролази кроз сваки пар кључ / вредност у туто, риал објекту опсега помоћу променљиве птутор.
- На крају, користимо ознаку <тд> заједно са паровима кључ / вредност (птутор.Наме и птутор.Десцриптион) за приказ података табеле Ангулар.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из горњег резултата,
- Можемо видети да се табела правилно приказује са подацима из низа парова кључ / вредност дефинисаним у контролеру.
- Подаци табеле су генерисани проласком кроз сваки од парова кључ / вредност употребом „нг-репеат директиве“.
Уграђени филтер АнгуларЈС
Веома је уобичајено да се помоћу уграђених филтера у програму АнгуларЈС промени начин приказа података у табелама. Већ смо видели филтере на делу у ранијем поглављу. Имајмо брзи преглед филтера пре него што наставимо.
У Ангулар.ЈС филтери се користе за форматирање вредности израза пре него што се он прикаже кориснику. Пример филтера је филтер „великих слова“ који узима излаз низа и форматира низ и приказује све знакове у низу као велика слова.
Дакле, у доњем примеру, ако је вредност променљиве „ТуториалНаме“ „АнгуларЈС“, излаз доњег израза ће бити „АНГУЛАРЈС“.
{{ТуротиалНаме | велико слово}}
У овом одељку ћемо детаљније размотрити како се филтри ордерБи и велика слова могу детаљније користити у табелама.
Поредај табелу са филтером ОрдерБи
Овај филтер се користи за сортирање табеле на основу једног од ступаца табеле. У претходном примеру, излаз за наше податке табеле Ангулар појавио се као што је приказано доле.
| Контролери | Контролери у акцији |
| Модели | Модели и подаци о везивању |
| Директиве | Флексибилност директива |
Погледајмо пример како можемо користити филтер „ордерБи“ и сортирати податке табеле Ангулар помоћу прве колоне у табели.
Event Registration Guru99 Global Event
{{ptutor.Name}} {{ptutor.Description}}
Објашњење кода:
- Користимо исти код као и за креирање наше табеле, једина разлика овог пута је што користимо филтер „ордерБи“ заједно са директивом нг-репеат. У овом случају кажемо да желимо да табелу наручимо помоћу тастера „Име“.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Видимо да су подаци у табели Ангулар сортирани према подацима у првој колони. У нашем скупу података подаци „Директиве“ потичу из података „Модели“, али зато што смо применили филтер ордерБи, табеле се према томе сортирају.
Приказ табеле са великим словом
Такође можемо да користимо филтер великог слова да променимо податке у табели Ангулар у велика слова.
Погледајмо пример како то можемо постићи.
Event Registration Guru99 Global Event
{{ptutor.Name | uppercase}} {{ptutor.Description}}
Објашњење кода:
- Користимо исти код као и за креирање наше табеле, једина разлика овог пута је што користимо филтер великог слова. Овај филтер користимо заједно са „птутор.Наме“ тако да ће сав текст у првој колони бити приказан великим словом.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Видимо да се употребом филтера „велика слова“ сви подаци у првој колони приказују великим словима.
Прикажи индекс табеле ($ индекс)
Да бисте приказали индекс табеле, додајте <тд> са $ индексом.
Погледајмо пример како то можемо постићи.
Event Registration Guru99 Global Event
{{$index + 1}} {{ptutor.Name}} {{ptutor.Description}}
Објашњење кода:
- Користимо исти код као и за креирање наше табеле, једина разлика је овај пут што у нашу табелу додајемо додатни ред за приказ колоне индекса.
У овој додатној колони користимо својство „$ индек“ које пружа АнгуларЈС, а затим помоћу +1 оператора повећавамо индекс за сваки ред.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Видите да је створена додатна колона. У овој колони можемо видети индексе који се креирају за сваки ред.
Резиме:
- Структуре табела креирају се помоћу стандардних ознака доступних у ХТМЛ-у. Подаци у табели се попуњавају помоћу „нг-репеат“ директиве.
- Филтер ордерБи се може користити за сортирање табеле на основу било ког ступца у табели.
- Филтер великих слова може се користити за приказ података у било којој колони заснованој на тексту великим словима.
- Својство „$ индек“ се може користити за креирање индекса за табелу.
- Једно уобичајено питање на које се наилази током развоја табела АнгуларЈС.ЈС је примена великих скупова података који имају 1000+ редова података. Понекад директива нг-репеат може да престане да реагује, па отуда цела страница понекад не реагује. У таквом случају, увек је боље имати пагинацију у којој се редови података шире на више страница.