AngularJS - ievades veidlapās

Veidlapas datu pārvaldība

Tīmekļa lietojumprogrammās dabiskākais veids, kā iegūt lietotāja datus, ir veidlapas, ar tām mēs varam izveidot elementus, kas uztver tekstu vai vienkāršus apstiprinājumus, piemēram, izvēles rūtiņas, taču to visu var tulkot kā lietotāja datus, ar tiem mēs varam veikt dažādas apstrādes.
In AngularJS Darbs ar šīm datu ievadēm ir ļoti vienkāršs, jo, pateicoties bibliotēkas izveides veidam, mēs varam pārveidot daļu no saņemtajiem datiem par darbībām mūsu lietojumprogrammā, lai veiktu aprēķinus vai noteiktu to uzvedību.
Šajā sadaļā mēs redzēsim nedaudz vairāk par to, kā rīkoties ar ievadi formās, izmantojot AngularJS.
Kā tas darbojas?Veids, kā mēs varam izveidot savienību starp ievades elementiem un mūsu loģiku AngularJS ir ļoti vienkārši, mums ir jāizmanto īpašums ng-modelis un viss prasīs sava veida attiecības, tāpēc ar to vērtību, ko mēs ievadām pēc formas, var manipulēt AngularJS, tas var attiekties uz ievades teksts, radio pogas, izvēles rūtiņa utt.
Tālāk apskatīsim nelielu piemēru tam, ko mēs izskaidrojam:

Šeit notiek tas, kas ietilpst darbības jomā Mūsu kontrolieris mēs varam manipulēt ar to, ko lietotājs dara marķiera izvēles rūtiņa, tad, ja lietotājs to atzīmē, mēs nekavējoties saņemsim marķieris kā taisnība, un, ja noņemsit atzīmi no tās, mums būs pretēja atbilde.
Mēs varam iet nedaudz tālāk un varam ieiet Mūsu kontrolieris ka marķieris pēc noklusējuma ir atzīmēta, tad, kad lietotājs pirmo reizi ierauga lapu, tiks atzīmēta izvēles rūtiņa.
Pievienot darbības
Bet ne tikai datu iegūšanā, kas mums jāpaliek, mēs varam un mums ir jāiekļauj darbības, tiklīdz mēs esam saņēmuši informāciju, AngularJS Mēs varam izsaukt funkcijas un metodes, kas tiek izpildītas mūsu ievades elementa gadījumā, piemēram, mēs izveidosim nelielu kalkulatoru, kas ņem investīciju aprēķinu, lai veiktu saistības. Mēs darīsim, reizinot saņemto vērtību ar 10, pieņemsim skatīt:
1- Vispirms mums ir jāizveido HTML elementi, kurus mēs izmantosim, tāpat kā iepriekšējā piemērā mēs izveidosim kontrolieri un ievade būs daļa no mūsu modeļa:

PALIELINĀT

2- Mēs redzam, ka esam ieviesuši jaunu īpašumu ng-maiņa un mēs esam piešķīruši zvanu funkcijai ar nosaukumu calculoInversion () Tas nozīmē, ka katru reizi, kad mainās mūsu ievades lauks, funkcija tiks izsaukta, jo mēs redzam, ka tas ir kaut kas ļoti vienkāršs.
3- Tagad mēs veidosim kodu ar AngularJS kas atdzīvinās redzēto:

4- Mēs izveidojam atbilstošu kontrolieri, pēc tam norādām modeļa sākotnējo vērtību, šajā gadījumā mēs to pielīdzinām 0, tas ietver abus elementus Aprēķinātais sākotnējais Kas nepieciešams, tad mēs izveidojam funkciju calculoInversion () Mēs redzam, ka mēs to darām tā dēvētajā mūsu kontroliera darbības jomā, tādā veidā tas ir saistīts ar mūsu elementu. Tādējādi mūsu lietojumprogrammai vajadzētu darboties pamata līmenī.
Protams, šajā piemērā trūkst vairāku validāciju, un tas tiek ņemts vērā tikai tad, kad lietotājs maina ievadītā teksta vērtību, taču tas kalpo kā ievads, lai iekļautu darbības mūsu lietojumprogrammās, kas rakstītas ar AngularJS.
Iepriekšējais1 lapa no 2Nākamais