AngularJS klases un stili

Veids, kādā mēs varam strādāt ar savām lietojumprogrammām un tā lietotāja interfeisu, var nozīmēt stila izmaiņas, šīs izmaiņas lielākoties atspoguļojas vismodernākajās lietojumprogrammās ar izmaiņām nodarbības CSS no elementiem, ar to mēs varam pārvaldīt mūsu elementu krāsu izvietojumu, izkārtojuma maiņu utt HTML.
AngularJS ļauj mums dinamiski veikt šīs izmaiņas, mainoties modelim, lai mēs varētu saistīt lietojumprogrammas izskatu kopumā ar tās darbību, jo mums ir divi veidi, viens izmantojot interpolāciju un otrs ar direktīvu ng klase.
Šajā gadījumā iedomāsimies, ka mums ir a CSS klase, ja mēs vēlamies to piemērot savam elementam noteiktā brīdī vai darbībā, mēs varam izmantot interpolācijas apzīmējumu Stūrains {{}} lai jūs varētu piemērot izmaiņas ar funkciju, kas darbojas uz $ darbības joma kontrolieris.
Piemēram, mums ir klase, kas parāda elementu pelēkā krāsā, lai parādītu, ka tas nav aktīvs:

 .menu-disabled-true {krāsa: pelēka; } 

Ja mēs vēlamies to piemērot mūsu lietojumprogrammai, mēs zinām, ka mēs varam likt elementam pārņemt direktīvu stāvokli, ievērojot:

Deaktivizēt

Tagad mēs veidojam savu saturu Javascript, šeit mēs mainīsim īpašumu isDisabled katru reizi, kad noklikšķinām uz mūsu elementa:

 funkcija MenuController ($ mērogs) {$ ulatums.isDisabled = nepatiess; $ darbības joma. atspējot = function () {$ scope.isDisabled = 'true'; }; } 

Tagad mēs redzam, kā tas izskatās, startējot lietojumprogrammu:

Un tagad, noklikšķinot uz deaktivizēt:

Mēs varējām novērot, kā notika izmaiņas CSS klase vienkāršā veidā un ka kontrolieris visu apstrādāja.
Vēl viens veids, kā piemērot stila izmaiņas, ir direktīva ng klase, tas ļauj mums nedaudz elastīgāk, jo mēs varam izmantot tā darbības veidu AngularJS tādējādi mēs varam pārvaldīt nosacījumu novērtēšanu un atkarībā no to izpildes mēs varam parādīt vienu vai otru klasi.
Nākamajā piemērā redzēsim, ka mēs vēlamies, lai būtu brīdinājuma klase un kļūdu klase, ar to mēs pat varam parādīt dažādus ziņojumus, lai lietotājs varētu būt informēts par notiekošo. Mums ir CSS klases, kuras mēs izmantosim:

 . kļūda {fona krāsa: sarkana; } .brīdinājums {fona krāsa: dzeltena; } 

Tagad mēs ģenerēsim HTML, mēs izmantosim direktīvā ng klase dažas īpašības kļūda: isError Y brīdinājums: isBrīdinājumsŠie novērtējumi ļauj izvēlēties vienu vai otru klasi no tām, kuras esam definējuši CSS.
Tad mums ir a {{ziņojums}} kas parādīs atbilstošo vērtību, kuru mēs ievietosim kontrollerī:

{{ziņojums}}Simulēt kļūdu Simulēt brīdinājumu

Visbeidzot, mēs veicam darbu Javascript:

 funkcija ClasesController ($ mērogs) {$ ulatums.isError = nepatiess; $ ulatums.isWarning = nepatiess; $ ulatums.showError = funkcija () {$ apjoms.message = 'Šī ir kļūda!'; $ ulatums.isError = true; $ ulatums.isWarning = nepatiess; }; $ ulatums.mostrarWarning = funkcija () {$ darbības joma. message = 'Tikai brīdinājums.'; $ ulatums.isWarning = true; $ ulatums.isError = nepatiess; }; } 

Tādējādi mēs savā pārlūkprogrammā sasniegsim šādu rezultātu:

PALIELINĀT

Mēs skatāmies uz konsoli attēlā, kas liek mums a ng saistošs ar brīdinājuma klasi, kuru mēs esam definējuši brīdinājumiem, ja noklikšķinām uz Simulēt kļūdu tad dariet to pašu ar kļūdu klasi. Ar to mēs pabeidzam šo apmācību, mēs jau esam iemācījušies saistīt CSS stilus un klases ar mūsu izveidotajām lietojumprogrammām AngularJS.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu