Kuidas luua rippmenüü kast nurga abil?



Selles blogis õpime, kuidas nurkraamistiku abil luua lihtne rippmenüü. Rippmenüü on loodud kahe unikaalse meetodi abil.

Teatud igapäevaste ülesannete täitmise õppimine ja täiustamine Angulari abil võib teie karjääri üsna kiiresti edendada, eriti kui olete uus . Selles artiklis arutleme ühe sellise ülesande üle, mille arendaja peab olema tuhandeid kordi teinud: tagasihoidliku rippmenüü loomise. Selles ajaveebis käsitletakse järgmisi teemasid:

Mis on nurgeline?


Nurga logo - Nurga MVC - edurekaNoh, kui loete ajaveebi selle kohta, kuidas teha rippmenüüd Angulari abil, võib eeldada, et teil on juba üldine idee Angulari kohta. Neile teist, kes seda ajaveebi interneti kapriiside ja fantaasiate tõttu ei ole ja on selle otsa komistanud, on esiotsa arendusraamistik. Seda töötab välja ja haldab tehnoloogiagigant Google. See pakub modulaarset viisi ühe lehe veebirakenduste, nagu Gmail, PayPal ja Lego, väljatöötamiseks. Nurga abil loodud rakendused rakendavad mudel-vaade-vaade-mudel lähenemist.





Mis on rippmenüü?

Rippmenüü ikooni pilditulemusRippmenüü on puhas meetod valikuvõimaluste kuvamiseks, kuna esialgu kuvatakse ainult üks valik, kuni kasutaja rippmenüü aktiveerib. Veebilehele rippmenüü lisamiseks kasutage a valige element või a loendiüksus . Valitud elemendi esimesel märgendil peab valitud suvand olema seatud valitud väärtusele. Siin on väike koodijupp, mis näitab teile, mida ma mõtlen.

märksõnapõhine raamistik seleenis
Variant 1 Variant 2 Variant 3

Loomulikult vajaks ülaltoodud kood eeldatavaks käitumiseks oma spetsiifilist javascripti, kuid rippmenüü põhiline skelett jääb samaks. Vaatame, kuidas me seda nüüd nurkades teeme.



Rippmenüü kast nurga abil

Ausalt öeldes oleks üsna heidutav näidata kõiki võimalikke viise rippmenüü rakendamiseks nurga all. Iga arendaja aju tegeleb loogikaga omapärasel viisil ja olen oma karjääri jooksul näinud mõnda pöörast rippmenüüd. Ma lähen alandlikuks ja näitan teile tüüpilisemat rippmenüü lähenemist.

1. meetod: rippmenüü koostamine ng-suvandite abil

Võite kasutada ng-valikuid massiivi või üksuste loendi rippmenüü loomiseks.

millised on piirangud sql-s
var app = nurk.moodul ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})

2. meetod: rippmenüü koostamine ng-repeat abil

Nurgeline olles mitmekülgne , on ilmselgelt rippmenüü loomiseks mitu võimalust. Direktiiv ng-repeat kordab massiivi iga üksuse jaoks HTML-koodi plokki, seda saab kasutada rippmenüü loendite loomiseks, kuid direktiiv ng-options tehti spetsiaalselt rippmenüü täitmiseks valikutega ja sellel on üks oluline eelis, st ng-options abil tehtud rippmenüüd võimaldavad valitud väärtuseks olla objekt, samas kui ng-repeat-ist tehtud rippmenüüd peavad olema stringid.



See konkreetne koodilõik rakendab sama loendit ng-repeat abil

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

See viib meid selle üsna lühikese ajaveebi „rippmenüü abil, mis kasutab nurka”. Loodan, et nüüd on teil idee, kuidas saaksite omaenda projektis rippmenüüd rakendada. Kui teil on selle blogi suhtes kahtlusi, saate need postitada kommentaarina allolevas kommentaaride jaotises. Võite ka jagada oma loovat viisi rippmenüü loomiseks.

mis see java operaator on

Kui soovite nurkraamistiku kohta lisateavet, vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus aitab teil põhjalikult mõista nurka ja aitab teil selle teema üle meisterlikkust saavutada.

Kas teil on meile küsimus? Palun mainige seda jaotise „Nurga rippmenüü” kommentaaride osas ja võtan teiega ühendust.