Mokymasis ir tobulinimas, kaip atlikti tam tikras kasdienes užduotis naudojant „Angular“, gali gana greitai sustiprinti jūsų karjerą, ypač jei esate naujas . Šiame straipsnyje aptarsime vieną iš tokių užduočių, kurias kūrėjas turėjo atlikti tūkstančius kartų: sukurti kuklų išskleidžiamąjį langelį. Šiame tinklaraštyje bus aptariamos šios temos:
- Kas yra kampinis?
- Kas yra išskleidžiamasis langelis?
- Išskleidžiamojo langelio sukūrimas naudojant kampinį.
Kas yra kampinis?
Na, jei skaitote tinklaraštį apie tai, kaip padaryti išskleidžiamąjį langelį naudojant „Angular“, galima manyti, kad jau turite bendrą „Angular“ idėją. Tiems iš jūsų, kurie šio interneto dienoraščio neturi ir užklupo dėl interneto užgaidų ir fantazijų, yra „front-end“ kūrimo sistema. Jį kuria ir prižiūri technologijų milžinė „Google“. Tai suteikia modulinį būdą kurti vieno puslapio žiniatinklio programas, tokias kaip „Gmail“, „PayPal“ ir „Lego“. Taikant „Angular“ sukurtas programas, įgyvendinamas „Model-View-View-Model-Model“ metodas.
Kas yra išskleidžiamasis langelis?
Išskleidžiamasis laukelis yra švarus būdas parodyti masyvą parinkčių, nes iš pradžių rodomas tik vienas pasirinkimas, kol vartotojas suaktyvins išskleidžiamąjį laukelį. Norėdami pridėti išskleidžiamąjį laukelį prie interneto puslapio, naudokite pasirinkite elementas arba a sąrašas-punktas . Pirmoje pažymėto elemento žymoje turi būti nustatyta pasirinkta parinktis pagal pasirinktą vertę. Štai nedidelis kodo fragmentas, parodantis, ką turiu omenyje.
c ++ vardų srities pavyzdys
1 variantas 2 variantas 3 variantas
Žinoma, aukščiau nurodytam kodui reikės konkretaus „javascript“, kad būtų galima tikėtis elgsenos, tačiau pagrindinis išskleidžiamojo meniu skeletas išlieka tas pats. Pažiūrėkime, kaip mes tai darome dabar „Angular“.
Išskleidžiamasis langelis naudojant kampinį
Sąžiningai kalbant, būtų gana nedrąsu parodyti visus įmanomus būdus, kaip įgyvendinti išskleidžiamąjį langelį kampu. Kiekvieno kūrėjo smegenys logiką valdo savitai ir aš savo karjeroje mačiau beprotiškus išskleidžiamuosius meniu. Aš būsiu kuklus ir jums parodysiu gana paprastą išskleidžiamojo meniu požiūrį.
1 metodas: sudarykite išskleidžiamąjį sąrašą naudodami „ng-options“
Galite naudoti „ng-options“ sukurti išskleidžiamąjį meniu iš masyvo ar elementų sąrašo.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})2 metodas: sudarykite išskleidžiamąjį sąrašą naudodami „ng-repeat“
Kampinis yra universalus , akivaizdu, kad yra keli būdai, kaip sukurti pagrindinį išskleidžiamąjį meniu. „Ng-repeat“ direktyva pakartoja HTML kodo bloką kiekvienam masyvo elementui, jį galima naudoti kuriant parinktis išskleidžiamajame sąraše, tačiau „ng-options“ direktyva buvo sukurta specialiai tam, kad užpildytumėte išskleidžiamąjį sąrašą parinktimis ir turi vieną svarbų pranašumas, ty išskleidžiamieji meniu, sudaryti naudojant „ng-options“, leidžia pasirinktai vertei būti objektu, o išskleidžiamieji iš „ng-repeat“ turi būti eilutė.
Šis konkretus kodo fragmentas įgyvendina tą patį sąrašą naudodamas „ng-repeat“
kaip nustatyti java classpath linux komandinėje eilutėje
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Tai leidžia mums užbaigti šį gana trumpą tinklaraščio „išskleidžiamąjį sąrašą naudojant kampinį“ sąrašą. Tikiuosi, kad dabar turite idėją, kaip galėtumėte įgyvendinti išskleidžiamąjį meniu savo pačių projekte. Jei turite abejonių dėl šio tinklaraščio, galite juos paskelbti kaip komentarą žemiau esančiame komentarų skyriuje. Taip pat galite pasidalinti savo kūrybiniu būdu sukurti išskleidžiamąjį langelį.
Jei norite sužinoti daugiau apie kampinę sistemą, peržiūrėkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai padės jums giliau suprasti kampinį kampą ir padės jums įsisavinti šį dalyką.
Turite mums klausimą? Prašau paminėti tai komentarų skiltyje „Kampinis išskleidžiamasis meniu“ ir aš susisieksiu su jumis.