Kā izveidot nolaižamo lodziņu, izmantojot Angular?



Šajā emuārā mēs uzzinām, kā izveidot vienkāršu nolaižamo lodziņu, izmantojot Angular framework. Nolaižamā izvēlne tiek izveidota, izmantojot divas unikālas metodes.

Mācīšanās un pilnveidošana, kā veikt noteiktus ikdienas uzdevumus, izmantojot Angular, var diezgan ātri uzlabot jūsu karjeru, it īpaši, ja esat jauns . Šajā rakstā mēs apspriedīsim par vienu šādu uzdevumu, kas izstrādātājam ir jāveic tūkstošiem reižu: pazemīgas nolaižamās izvēles rūtiņas izveidošana. Šajā emuārā tiks aplūkotas šādas tēmas:

Kas ir leņķiskais?


Leņķiskais logotips - leņķiskais MVC - edurekaNu, ja jūs lasāt emuāru par to, kā izveidot nolaižamo lodziņu, izmantojot Angular, var pieņemt, ka jums jau ir vispārēja ideja par Angular. Tiem no jums, kuri to nedara un kuri ir pakļuvuši šim emuāram interneta iegribu un iedomu dēļ, ir front-end attīstības ietvars. To izstrādā un uztur tehnoloģiju gigants Google. Tas nodrošina modulāru veidu, kā izstrādāt vienas lapas tīmekļa lietojumprogrammas, piemēram, Gmail, PayPal un Lego. Lietojumprogrammas, kas izveidotas, izmantojot leņķisko, īsteno pieeju Model-View-View-Model.





Kas ir nolaižamais lodziņš?

Attēla rezultāts nolaižamās izvēlnes ikonaiNolaižamā izvēlne ir tīra metode, kā parādīt opciju masīvu, jo sākotnēji tiek parādīta tikai viena izvēle, līdz lietotājs aktivizē nolaižamo lodziņu. Lai tīmekļa lapai pievienotu nolaižamo lodziņu, izmantojiet a atlasiet elements vai a saraksta vienums . Pirmajam tagam atlasītā elementā atlasītajai opcijai jābūt iestatītai uz atlasītās vērtības. Šeit ir neliels koda fragments, lai parādītu, ko es domāju.

apaļa dubultā līdz int java
1. variants 2. variants 3. variants

Protams, iepriekšminētajam kodam būtu nepieciešams tā īpašais javascript, lai gaidītu uzvedību, taču nolaižamās izvēlnes pamata skelets paliek nemainīgs. Apskatīsim, kā mēs to darām tagad Angular.



Nolaižamā izvēlne, izmantojot leņķisko

Godīgi sakot, būtu diezgan biedējoši demonstrēt visus iespējamos veidus, kā īstenot nolaižamo lodziņu leņķiski. Katra izstrādātāja smadzenes loģiku apstrādā savā unikālajā veidā, un savā karjerā esmu redzējis dažas neprātīgas nolaižamās izvēlnes. Es būšu pazemīgs un parādīšu puišiem diezgan vienkāršu nolaižamās izvēlnes pieeju.

1. metode: Nolaižamā saraksta izveidošana, izmantojot ng-options

Varat izmantot opcijas ng lai izveidotu nolaižamo izvēlni no masīva vai vienumu saraksta.

kas ir javascript metode
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})

2. metode: Nolaižamā saraksta izveidošana, izmantojot ng-repeat

Stūra būt daudzpusīgam , protams, ir vairāki veidi, kā izveidot pamata nolaižamo izvēlni. Direktīva ng-repeat atkārto HTML koda bloku katram masīva vienumam, to var izmantot, lai izveidotu opcijas nolaižamajā sarakstā, bet direktīva ng-options tika īpaši izstrādāta, lai aizpildītu nolaižamo sarakstu ar opcijām, un tai ir viena svarīga priekšrocība, ti, nolaižamajās izvēlnēs, kas izveidotas ar ng-options, izvēlētā vērtība var būt objekts, savukārt nolaižamajām izvēlnēm, kas izgatavotas no ng-repeat, jābūt virknei.



Šis konkrētais koda fragments īsteno to pašu sarakstu, izmantojot ng-repeat

{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})

Tas mūs noved pie šī diezgan īsā emuāra “nolaižamā saraksta, izmantojot leņķisko”. Es ceru, ka tagad jums ir ideja par to, kā jūs varētu ieviest nolaižamo izvēlni savā projektā. Ja jums ir šaubas par šo emuāru, varat tos ievietot kā komentāru zemāk esošajā komentāru sadaļā. Jūs varētu arī dalīties ar savu radošo veidu, kā izveidot nolaižamo lodziņu.

filtru veidi tablo

Ja vēlaties uzzināt vairāk par leņķa ietvaru, iepazīstieties ar mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šī apmācība palīdzēs jums padziļināti izprast leņķisko un palīdzēs jums apgūt priekšmetu.

Vai mums ir jautājums? Lūdzu, pieminējiet to komentāru sadaļā “Angular Dropdown”, un es sazināšos ar jums.