Nauka i doskonalenie wykonywania niektórych codziennych zadań za pomocą Angular może bardzo szybko przyspieszyć Twoją karierę, zwłaszcza jeśli jesteś nowy w . W tym artykule omówimy jedno z takich zadań, które programista musiał wykonać tysiące razy: stworzenie skromnej listy rozwijanej. Na tym blogu zostaną omówione następujące tematy:
Co to jest Angular?
Cóż, jeśli czytasz blog o tym, jak utworzyć listę rozwijaną za pomocą Angular, możesz założyć, że masz już ogólne pojęcie o Angular. Dla tych z Was, którzy tego nie robili i natknęli się na tego bloga z powodu kaprysów i fantazji internetu, to front-end programistyczny framework. Jest rozwijany i utrzymywany przez giganta technologicznego Google. Zapewnia modułowy sposób tworzenia jednostronicowych aplikacji internetowych, takich jak Gmail, PayPal i Lego. Aplikacje zbudowane przy użyciu Angular implementują podejście Model-View-View-Model.
przekazuj przez wartość i przekazuj przez odwołanie java
Co to jest rozwijana skrzynka?
Rozwijane okno to przejrzysta metoda pokazania tablicy opcji, ponieważ tylko jeden wybór jest wyświetlany początkowo, dopóki użytkownik nie aktywuje rozwijanego pola. Aby dodać listę rozwijaną do strony internetowej, należy użyć pliku Wybierz element lub element listy . Pierwsza znacznik w elemencie select musi mieć wybraną opcję ustawioną na wartość selected. Oto mały fragment kodu, aby pokazać, o co mi chodzi.
Opcja 1 Opcja 2 Opcja 3
Oczywiście powyższy kod wymagałby określonego javascript, aby mieć oczekiwane zachowanie, ale podstawowy szkielet menu rozwijanego pozostaje ten sam. Zobaczmy teraz, jak zrobimy to w Angular.
Rozwijane pole za pomocą Angular
Szczerze mówiąc, raczej zniechęcające byłoby zademonstrowanie wszystkich możliwych sposobów implementacji rozwijanego pola w trybie kątowym. Mózg każdego programisty radzi sobie z logiką na swój własny, unikalny sposób, a w swojej karierze widziałem kilka szalonych rozwijanych menu. Mam zamiar być pokorny i pokazać wam raczej podstawowe podejście do menu rozwijanego.
Metoda 1: Tworzenie listy rozwijanej za pomocą ng-options
Możesz użyć opcji ng-options aby utworzyć menu rozwijane z tablicy lub listy elementów.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Metoda 2: Tworzenie listy rozwijanej za pomocą ng-repeat
Angular jest wszechstronny , oczywiście ma wiele sposobów tworzenia podstawowego menu rozwijanego. Dyrektywa ng-repeat powtarza blok kodu HTML dla każdego elementu w tablicy, można jej użyć do tworzenia opcji na liście rozwijanej, ale dyrektywa ng-options została stworzona specjalnie do wypełniania listy rozwijanej opcjami i ma jedną ważną Zaleta tzn. rozwijane menu utworzone z opcjami ng pozwalają wybranej wartości być obiektem, podczas gdy listy rozwijane utworzone z ng-powtórzeń muszą być ciągiem znaków.
Ten konkretny fragment kodu implementuje tę samą listę przy użyciu ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})To prowadzi nas do końca tej raczej krótkiej listy rozwijanej bloga przy użyciu kątów. Mam nadzieję, że teraz masz pomysł, w jaki sposób możesz wdrożyć menu rozwijane w swoim własnym projekcie. Jeśli masz jakiekolwiek wątpliwości dotyczące tego bloga, możesz zamieścić je jako komentarz w sekcji komentarzy poniżej. Możesz także udostępnić swój własny kreatywny sposób tworzenia listy rozwijanej.
co to jest agregacja w java
Jeśli chcesz dowiedzieć się więcej o frameworku Angular, sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie pomoże ci dogłębnie zrozumieć Angular i pomoże ci osiągnąć mistrzostwo w tym temacie.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy w „Angular Dropdown”, a skontaktuję się z Tobą.