Ученето и усъвършенстването как да изпълнявате определени ежедневни задачи с помощта на Angular може да ускори кариерата ви доста бързо, особено ако сте нов в . В тази статия ще обсъдим една такава задача, която разработчикът трябва да е направил хиляди пъти: създаване на скромно падащо поле. В този блог ще бъдат разгледани следните теми:
как да компилирам java програма -
Какво е Angular?
Е, ако четете блог за това как да направите падащо поле с помощта на Angular, може да се предположи, че вече имате обща представа за Angular. За тези от вас, които не го правят и са попаднали на този блог поради капризите и фантазиите на интернет, е рамка за разработка отпред. Той е разработен и поддържан от технологичния гигант Google. Той предоставя модулен начин за разработване на уеб страници с една страница като Gmail, PayPal и Lego. Приложенията, изградени с помощта на Angular, прилагат подхода Model-View-View-Model.
Какво е падащо поле?
Падащото поле е чист метод за показване на масив от опции, тъй като първоначално се показва само един избор, докато потребителят активира падащото поле. За да добавите падащо поле към уеб страница, бихте използвали изберете елемент или a списък-елемент . Първият таг в елемента за избор трябва да има избраната опция, зададена на стойността на избрания. Ето малък кодов фрагмент, за да ви покажа какво имам предвид.
Вариант 1 Вариант 2 Вариант 3
Разбира се, горният код ще се нуждае от специфичния си javascript, за да има очаквано поведение, но основният скелет на падащото меню остава същият. Нека да видим как правим това в Angular сега.
Падащо поле, използващо ъглово
Честно казано, би било доста обезсърчително да се демонстрират всички възможни начини за внедряване на падащо меню в ъглово. Мозъкът на всеки разработчик се справя с логиката по свой уникален начин и съм виждал луди падащи менюта в кариерата си. Ще бъда скромен и ще ви покажа доста елементарен подход от падащото меню.
Метод 1: Създаване на падащ списък с помощта на ng-options
Можете да използвате ng-опциите за да създадете падащо меню от масив или списък с елементи.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Метод 2: Създаване на падащ списък с помощта на ng-repeat
Ъгловият е универсален , очевидно има множество начини за създаване на основно падащо меню. Директивата ng-repeat повтаря блок HTML код за всеки елемент в масив, може да се използва за създаване на опции в падащ списък, но директивата ng-options е създадена специално за попълване на падащ списък с опции и има едно важно предимство, т.е. падащите менюта, направени с ng-options, позволяват избраната стойност да бъде обект, докато падащите менюта, направени от ng-repeat, трябва да бъдат низ.
Този конкретен кодов фрагмент изпълнява същия списък, използвайки ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Това ни води до края на този доста кратък „падащ списък в блога, използващ angular“. Надявам се сега да имате представа как бихте могли да приложите падащо меню във вашия собствен проект. Ако имате някакви съмнения относно този блог, можете да ги публикувате като коментар в раздела за коментари по-долу. Можете също така да споделите свой собствен творчески начин за създаване на падащо поле.
Ако искате да научите повече за Angular framework, разгледайте нашата което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ще ви помогне да разберете по-задълбочено Angular и ще ви помогне да постигнете майсторство по темата.
python конвертира десетичен в двоичен
Имате въпрос към нас? Моля, споменете го в раздела за коментари на „Ъглово падащо меню“ и аз ще се свържа с вас.