Naučiť sa a zdokonaľovať, ako vykonávať určité každodenné úlohy pomocou Angular, vám môže dosť rýchlo pozdvihnúť kariéru, najmä ak ste v odbore nováčikovia . V tomto článku budeme diskutovať o jednej z takých úloh, ktorú musel vývojár urobiť tisíckrát: vytvoriť skromnú rozbaľovaciu ponuku. V tomto blogu sa budeme venovať nasledujúcim témam:
ako používať podreťazec v jave
Čo je uhlové?
Pokiaľ čítate blog o tom, ako vytvoriť rozbaľovaciu ponuku pomocou Angular, dá sa predpokladať, že už máte všeobecnú predstavu o Angular. Pre tých z vás, ktorí nie a narazili na tento blog kvôli rozmarom a predstavám internetu, je front-endový rozvojový rámec. Je vyvíjaný a udržiavaný technickým gigantom Google. Poskytuje modulárny spôsob vývoja jednostránkových webových aplikácií, ako sú Gmail, PayPal a Lego. Aplikácie postavené pomocou Angular implementujú prístup Model-View-View-Model.
Čo je rozbaľovací zoznam?
Rozbaľovací zoznam predstavuje čistú metódu zobrazenia poľa možností, pretože na začiatku sa zobrazuje iba jedna voľba, kým používateľ rozbaľovacie pole neaktivuje. Na pridanie rozbaľovacieho poľa na webovú stránku by ste použili a vyberte prvok alebo a položka zoznamu . Prvá značka vo vybranom prvku musí mať vybratú možnosť nastavenú na hodnotu selected. Tu je malý útržok kódu, ktorý vám ukáže, čo tým myslím.
Možnosť 1 Možnosť 2 Možnosť 3
Vyššie uvedený kód samozrejme vyžaduje svoj špecifický javascript, aby mohol mať očakávané správanie, ale základná kostra rozbaľovacej ponuky zostáva rovnaká. Pozrime sa, ako to teraz urobíme v Angular.
Rozbaľovací zoznam pomocou Angular
Úprimne povedané, bolo by dosť odvážne demonštrovať všetky možné spôsoby, ako implementovať rozbaľovaciu ponuku v uhle. Mozog každého vývojára zvláda logiku svojím vlastným jedinečným spôsobom a v mojej kariére som videl niekoľko bláznivých rozbaľovacích ponúk. Budem skromný a ukážem vám, chlapci, pomerne zásadný prístup k rozbaľovaciemu menu.
Metóda 1: Vytvorenie rozbaľovacieho zoznamu pomocou možností ng-options
Môžete použiť ng-options na vytvorenie rozbaľovacej ponuky z poľa alebo zoznamu položiek.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Metóda 2: Vytvorenie rozbaľovacieho zoznamu pomocou programu ng-repeat
Uhlová bytosť je všestranná , má samozrejme niekoľko spôsobov, ako vytvoriť základnú rozbaľovaciu ponuku. Direktíva ng-repeat opakuje blok kódu HTML pre každú položku v poli. Môže byť použitá na vytvorenie možností v rozbaľovacom zozname, ale smernica ng-options bola vytvorená špeciálne na vyplnenie rozbaľovacieho zoznamu možnosťami a má jednu dôležitú výhoda tj rozbaľovacie ponuky vytvorené pomocou ng-options umožňuje, aby vybranou hodnotou bol objekt, zatiaľ čo rozbaľovacími ponukami vytvorenými z ng-repeat musí byť reťazec.
Tento konkrétny útržok kódu implementuje rovnaký zoznam pomocou programu ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Týmto sa dostávame na koniec tohto pomerne krátkeho „rozbaľovacieho zoznamu používajúceho angular“. Dúfam, že teraz máte predstavu o tom, ako by ste mohli implementovať rozbaľovaciu ponuku vo svojom vlastnom projekte. Ak máte pochybnosti o tomto blogu, môžete ich uverejniť ako komentár v sekcii komentárov nižšie. Môžete tiež zdieľať svoj vlastný kreatívny spôsob výroby rozbaľovacieho poľa.
Ak sa chcete dozvedieť viac o uhlovom rámci, pozrite si naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže pochopiť Angular do hĺbky a pomôže vám dosiahnuť osvojenie si predmetu.
sqoop import z Oracle do hdfs
Máte na nás otázku? Uveďte to prosím v sekcii komentárov v časti „Angular Dropdown“ a ozvem sa vám.