Naučit se a zdokonalovat, jak dělat určité každodenní úkoly pomocí Angular, vám může docela rychle posílit kariéru, zvláště pokud jste v oboru noví . V tomto článku budeme diskutovat o jednom takovém úkolu, který vývojář musel udělat tisícekrát: vytvoření skromného rozevíracího seznamu. V tomto blogu se budeme zabývat následujícími tématy:
zadní strana čísla v Javě
Co je Angular?
Pokud čtete blog o tom, jak vytvořit rozbalovací nabídku pomocí Angular, lze předpokládat, že už máte obecnou představu o Angular. Pro ty z vás, kteří ne a narazili na tento blog kvůli rozmarům a fantazii internetu, je front-endový vývojový rámec. Je vyvíjen a udržován technologickým gigantem Google. Poskytuje modulární způsob vývoje jednostránkových webových aplikací, jako jsou Gmail, PayPal a Lego. Aplikace vytvořené pomocí Angular implementují přístup Model-View-View-Model.
Co je to rozevírací seznam?
Rozevírací seznam je čistá metoda zobrazení pole možností, protože zpočátku se zobrazuje pouze jedna volba, dokud uživatel rozevírací pole neaktivuje. K přidání rozevíracího seznamu na webovou stránku byste použili a vybrat prvek nebo list-item . První značka ve vybraném prvku musí mít vybranou možnost nastavenou na hodnotu selected. Zde je malý fragment kódu, který vám ukáže, co tím myslím.
Možnost 1 Možnost 2 Možnost 3
Výše uvedený kód samozřejmě potřebuje svůj konkrétní javascript, aby měl očekávané chování, ale základní kostra rozevírací nabídky zůstává stejná. Podívejme se, jak to nyní děláme v Angular.
Rozevírací seznam pomocí úhlové
Upřímně řečeno, bylo by docela skličující předvést všechny možné způsoby, jak úhlově implementovat rozevírací seznam. Mozek každého vývojáře zvládá logiku svým vlastním jedinečným způsobem a v mé kariéře jsem viděl nějaké šílené rozbalovací nabídky. Budu pokorný a ukážu vám kluci spíše základní přístup z rozbalovací nabídky.
Metoda 1: Vytvoření rozevíracího seznamu pomocí možností ng-options
Můžete použít možnosti ng k vytvoření rozevírací nabídky z pole nebo seznamu položek.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Metoda 2: Vytvoření rozevíracího seznamu pomocí ng-repeat
Úhlová bytost je univerzální , má samozřejmě několik způsobů, jak vytvořit základní rozbalovací nabídku. Direktiva ng-repeat opakuje blok kódu HTML pro každou položku v poli, lze ji použít k vytvoření možností v rozevíracím seznamu, ale směrnice ng-options byla vytvořena speciálně pro vyplnění rozevíracího seznamu možnostmi a má jednu důležitou výhoda tj. rozbalovací nabídky vytvořené pomocí ng-options umožňuje, aby vybranou hodnotou byl objekt, zatímco rozbalovací nabídky vytvořené z ng-repeat musí být řetězec.
Tento konkrétní fragment kódu implementuje stejný seznam pomocí ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Tím se dostáváme na konec tohoto poměrně krátkého „rozevíracího seznamu používajícího úhlový“ blog. Doufám, že nyní máte představu o tom, jak byste mohli implementovat rozbalovací nabídku do svého vlastního projektu. Pokud máte ohledně tohoto blogu jakékoli pochybnosti, můžete je přidat do komentáře v sekci komentářů níže. Můžete také sdílet svůj vlastní kreativní způsob výroby rozbalovacího pole.
Pokud se chcete dozvědět více o Angular framework, podívejte se na náš který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám pomůže porozumět Angular do hloubky a pomůže vám dosáhnout mistrovství v předmětu.
co je to žlab v hadoopu
Máte na nás dotaz? Uveďte to prosím v sekci komentářů v části „Angular Dropdown“ a ozvu se vám.