Az Angular használatával bizonyos mindennapi feladatok elvégzésének megtanulása és tökéletesítése elég gyorsan elősegítheti karrierjét, különösen, ha új vagy a . Ebben a cikkben egy olyan feladatról fogunk tárgyalni, amelyet a fejlesztőnek több ezer alkalommal kellett elvégeznie: egy alázatos legördülő mező létrehozását. A blog a következő témákkal foglalkozik:
osztály és interfész közötti különbség
Mi az a szögletes?
Nos, ha blogot olvas arról, hogy hogyan lehet legördülő mezőt készíteni az Angular használatával, akkor feltételezhető, hogy már van általános elképzelése az Angularról. Azok számára, akik nem az internet szeszélyei és fantáziái miatt botlottak bele ebbe a blogba, egy front-end fejlesztési keretrendszer. A technológiai óriás, a Google fejlesztette és tartja fenn. Moduláris módon biztosítja az egyoldalas webalkalmazások fejlesztését, mint például a Gmail, a PayPal és a Lego. Az Angular felhasználásával épített alkalmazások a Model-View-View-Model megközelítést valósítják meg.
Mi az a legördülő lista?
A legördülő mező tiszta módszer az opciók tömbjének megjelenítésére, mivel kezdetben csak egy választás jelenik meg, amíg a felhasználó aktiválja a legördülő mezőt. Ha legördülő mezőt szeretne hozzáadni egy weboldalhoz, használja a válassza elem vagy a listaelem . A select elem első címkéjének a kiválasztott opciót a kiválasztott értékre kell állítania. Itt van egy kis kódrészlet, amely megmutatja, mire gondolok.
1. lehetőség 2. lehetőség 3. lehetőség
Természetesen a fenti kódnak szüksége lenne a saját javascriptjére a várható viselkedéshez, de a legördülő menü alapvető csontváza ugyanaz marad. Lássuk, hogyan csináljuk ezt most Angularban.
Legördülő mező a szögletes használatával
Őszintén szólva ijesztő lenne a legördülő mező szögletes megvalósításának minden lehetséges módját bemutatni. Minden fejlesztő agya a maga egyedi módján kezeli a logikát, és karrierem során láttam néhány őrült legördülő menüt. Alázatos leszek, és meglehetősen egyszerű legördülő menü-megközelítést mutatok nektek.
1. módszer: Legördülő lista készítése az ng-options használatával
Használhatja az ng-beállításokat hogy egy tömbből vagy elemlistából hozzon létre egy legördülő menüt.
var app = szögletes.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})2. módszer: Legördülő lista készítése az ng-repeat használatával
Szögletes, hogy sokoldalú , nyilvánvalóan többféle módon lehet létrehozni egy alap legördülő menüt. Az ng-repeat direktíva megismétli a tömb minden eleméhez tartozó HTML kód blokkot, felhasználható opciók létrehozására egy legördülő listában, de az ng-options direktíva különösen egy legördülő lista opciókkal történő kitöltésére készült, és van egy fontos előnye, azaz az ng-options segítségével készített legördülő menük lehetővé teszik, hogy a kiválasztott érték objektum legyen, míg az ng-repeat legördülő menüinek karakterláncnak kell lennie.
Ez a bizonyos kódrészlet ugyanazt a listát valósítja meg az ng-repeat használatával
{{name}} var app = szögletes.modul ('demo', []) app.controller ('myCtrl', function ($ hatókör) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Ezzel a meglehetősen rövid blog „legördülő lista szögletes használatával” végére jutunk. Remélem, most van egy ötlete, hogyan tudná megvalósítani a legördülő menüt a saját projektjében. Ha kétségei vannak a bloggal kapcsolatban, akkor az alábbi megjegyzés szakaszban megjegyzésként közzéteheti őket. Megoszthatja saját kreatív módját is egy legördülő menü elkészítéséhez.
Ha többet szeretne megtudni az Angular frameworkről, akkor nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés segít megérteni a szögletes elmélyülést, és elsajátítja a téma elsajátítását.
python konvertálja a tizedest binárisra
Van egy kérdésünk? Kérjük, említse meg az „Angular Dropdown” megjegyzés rovatában, és visszajövök.