Шта је филтер у АнгуларЈС?
Филтер у ангуларјс помаже да се форматира вредност израз на екрану до корисника без промене оригинални формат. На пример, ако желите да ваш низ буде у малим или великим словима, то можете учинити помоћу филтера. Постоје уграђени филтри као што су „мала слова“, „велика слова“, који у складу с тим могу да преузму мала и велика слова.
Слично томе, за бројеве можете користити друге филтере.
Током овог водича видећемо различите стандардне уграђене филтере доступне у програму Ангулар.
У овом упутству ћете научити-
- Мала слова у АнгуларЈС
- Велика слова у АнгуларЈС
- Филтар бројева у АнгуларЈС
- Валутни филтер у АнгуларЈС
- ЈСОН филтер у АнгуларЈС
Мала слова у АнгуларЈС
Овај филтер узима излазни низ и форматира га и приказује све знакове у низу малим словима.
Погледајмо пример АнгуларЈС филтера са опцијом АнгуларЈС толоверцасе.
У доњем примеру, користићемо контролер за слање низа у приказ путем објекта опсега. Затим ћемо у приказу користити филтер за претварање низа у мала слова.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Објашњење кода:
- Овде прослеђујемо низ који представља комбинацију малих и великих слова у променљивој члана која се назива „туториалНаме“ и прилажемо га објекту опсега. Вредност низа који се прослеђује је „АнгуларЈС“.
- Користимо променљиву члана „туториалНаме“ и стављамо симбол филтера (|) што значи да излаз треба модификовати коришћењем филтера. Затим користимо кључну реч малим словима да кажемо да користимо уграђени филтер за излаз целог низа малим словима.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата
- Може се видети да је изведен низ „АнгуларЈС“ који је прослеђен у променљивој туториалНаме која је била комбинација малих и великих слова.
- Након извршења, коначни излаз је малим словима као што је приказано горе.
Велика слова у АнгуларЈС
Овај филтер је сличан малом; разлика је у томе што преузима излазни низ и форматира низ и приказује све знакове у низу као велика слова.
Погледајмо пример великих слова филтера АнгуларЈС са малим словима.
У доњем примеру АнгуларЈС писања великих слова користићемо контролер за слање низа у приказ путем објекта опсега. Затим ћемо у приказу користити филтер за претварање низа у велика слова.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Објашњење кода:
- Овде прослеђујемо низ који представља комбинацију малих и великих слова „Ангулар ЈС“ у променљивој члана која се назива „туториалНаме“ и прилажемо је објекту опсега.
- Користимо чланску променљиву „туториалНаме“ и стављамо симбол филтера (|), што значи да излаз треба изменити коришћењем филтера. Затим користимо кључну реч великим словима да кажемо да користимо уграђени филтер за излаз целог низа великим словом.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Може се видети да је низ који је прослеђен у променљивој туториалНаме која је била комбинација малих и великих слова избачен у свим великим словима.
Филтар бројева у АнгуларЈС
Овај филтер форматира број и може применити ограничење на децималне тачке за број.
Погледајмо пример АнгуларЈС филтера са опцијом број.
У доњем примеру,
Желели смо да покажемо како помоћу филтера бројева можемо форматирати број за приказ са ограничењем од 2 децимале.
Користићемо контролер за слање броја у приказ путем објекта опсега. Затим ћемо у приказу користити филтер за примену филтера бројева.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Објашњење кода:
- Овде прослеђујемо број са већим бројем децималних места у променљиву члана која се назива туториалИД и причвршћујемо га на објект опсега.
- Користимо променљиву члана туториалИД и стављамо симбол филтера (|) заједно са филтером бројева. Сада у броју: 2, та два указују да би филтер требало да ограничи број децималних места на 2.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Може се видети да је број који је прослеђен у променљивој туториалИД која је имала велики број децималних зареза ограничен на 2 децимале због примењених филтера нумбер: 2.
Валутни филтер у АнгуларЈС
Овај филтер форматира валутни филтер у број.
Претпоставимо, ако сте желели да прикажете број са валутом као што је $, онда се овај филтер може користити.
У доњем примеру ћемо користити контролер за слање броја у приказ путем објекта опсега. Затим ћемо у приказу користити филтер за примену тренутног филтера.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Објашњење кода:
- Овде прослеђујемо број у променљиву члана која се назива туториалприце и прикачимо га објекту опсега.
- Користимо чланску променљиву туториалприце и стављамо симбол филтера (|) заједно са валутним филтером. Имајте на уму да валута која се примењује зависи од поставки језика које се примењују на машину.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата
- Може се видети да је симбол валуте додан броју који је прослеђен променљивој туториалприце.
- У нашем случају, с обзиром да су поставке језика енглески (Сједињене Државе), симбол $ се убацује као валута.
ЈСОН филтер у АнгуларЈС
Овај филтер форматира улаз налик ЈСОН-у и примењује АнгуларЈС ЈСОН филтер да би дао излаз у ЈСОН-у.
У доњем примеру ћемо користити контролер за слање објекта типа ЈСОН у поглед преко објекта опсега. Затим ћемо у приказу користити филтер за примену ЈСОН филтра.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Објашњење кода:
- Овде прослеђујемо број у променљивој члана која се назива „туториал“ и прилажемо га објекту опсега. Ова променљива члана садржи ЈСОН тип низа Туториал ИД: 12 и ТуториалНаме: "Ангулар".
- Користимо водич за променљиве члана и стављамо симбол филтера (|) заједно са ЈСОН филтером.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Може се видети да је ЈСОН попут низа рашчлањен и приказује одговарајући ЈСОН објекат у прегледачу.
Резиме:
- Филтери се користе за промену начина на који се излаз приказује кориснику.
- Ангулар пружа уграђене филтере као што су мали и велики филтери за промену излаза низова у мала и велика, респективно.
- Такође постоји одредба за промену начина приказивања бројева коришћењем филтера бројева одређивањем броја децималних места које ће бити приказане у броју.
- Такође се помоћу валутног филтера може додати симбол валуте било којем броју.
- Ако постоји захтев да се има јсон специфичан излаз, ангулар такође нуди ЈСОН филтер за филтрирање било ког ЈСОН низа у ЈСОН формат.