Paano lumikha ng isang Dropdown Box gamit ang Angular?



Sa blog na ito natututunan namin kung paano lumikha ng isang simpleng dropdown box gamit ang Angular framework. Ang dropdown box ay nilikha gamit ang dalawang natatanging pamamaraan.

Ang pag-aaral at pagperpekto kung paano gawin ang ilang mga pang-araw-araw na gawain na gumagamit ng Angular ay maaaring mapalakas ang iyong karera nang napakabilis, lalo na kung bago ka sa . Sa artikulong ito, tatalakayin namin, ang tungkol sa isang ganoong gawain na dapat nagawa ng isang developer ng libu-libong oras: ang paglikha ng isang mababang kahon ng dropdown. Ang mga sumusunod na paksa ay saklaw sa blog na ito:

Ano ang Angular?


Angular Logo - Angular MVC - edurekaKaya, kung nagbabasa ka ng isang blog tungkol sa kung paano gumawa ng isang dropdown box gamit ang Angular, maaaring ipalagay na mayroon ka nang pangkalahatang ideya ng Angular. Para sa iyo na hindi at napadpad sa blog na ito dahil sa mga hangarin at hangarin sa internet, ay isang front-end development framework. Ito ay binuo at pinapanatili ng higanteng tech, Google. Nagbibigay ito ng isang modular na paraan upang makabuo ng mga solong-pahina na web application tulad ng Gmail, PayPal at Lego. Ang mga application na binuo gamit ang Angular ay nagpatupad ng diskarte sa Model-View-View-Model.





Ano ang isang Dropdown Box?

Resulta ng imahe para sa icon ng dropdown na menuAng isang drop-down box ay isang malinis na pamamaraan ng pagpapakita ng isang hanay ng pagpipilian dahil iisa lamang ang pagpipilian na ipinapakita hanggang sa maaktibo ng gumagamit ang dropdown box. Upang magdagdag ng isang dropdown-box sa isang web page, gagamitin mo ang isang pumili ka elemento o a list-item . Ang unang tag sa piling elemento ay kailangang magkaroon ng napiling pagpipilian na nakatakda sa halaga ng napili. Narito ang isang maliit na snippet ng code upang maipakita sa iyo kung ano ang ibig kong sabihin.

kung paano tapusin ang isang programa sa java
Pagpipilian 1 Pagpipilian 2 Pagpipilian 3

Siyempre, kakailanganin ng code sa itaas ang tiyak na javascript na ito upang magkaroon ng inaasahang pag-uugali, ngunit ang pangunahing balangkas ng isang dropdown menu ay mananatiling pareho. Tingnan natin kung paano natin ito ginagawa sa Angular ngayon.



Dropdown Box Gamit ang Angular

Sa totoo lang sa pagsasalita, magiging nakakatakot na ipakita ang lahat ng mga posibleng paraan upang ipatupad ang isang dropdown-box sa angular. Ang utak ng bawat developer ay humahawak ng lohika sa sarili nitong natatanging paraan at nakita ko ang ilang mga nakatutuwang mga dropdown na menu sa aking karera. Magiging mapagpakumbaba ako at ipapakita sa inyo ang isang pangunahing diskarteng dropdown-menu.

Paraan 1: Paggawa ng isang Dropdown List Gamit ang mga-pagpipilian

Maaari mong gamitin ang ng-options upang lumikha ng isang dropdown menu mula sa isang array o listahan ng mga item.

ano ang abstraction sa c ++
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ saklaw) {$ saklaw.names = ['Demavand', 'Pradeep', 'Ashutosh']})

Method 2: Making a Dropdown List Using ng-repeat

Angular pagiging isang maraming nalalaman , malinaw na maraming mga paraan upang lumikha ng isang pangunahing dropdown menu. Ang ng-ulit na direktiba ay inuulit ang isang bloke ng HTML code para sa bawat item sa isang array, maaari itong magamit upang lumikha ng mga pagpipilian sa isang dropdown list, ngunit ang direktiba ng-options ay ginawa lalo na para sa pagpuno ng isang dropdown list na may mga pagpipilian at may isang mahalagang kalamangan ie mga dropdown na menu na ginawa ng ng-mga pagpipilian ay nagbibigay-daan sa napiling halaga upang maging isang bagay, habang ang mga dropdown na ginawa mula sa ng-ulitin ay dapat na isang string.



Ang partikular na snippet ng code na nagpapatupad ng parehong listahan gamit ang ng-ulitin

{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ saklaw) {$ saklaw.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})

Dinadala nito sa amin ang katapusan ng medyo maikling blog na 'listahan ng dropdown na gumagamit ng anggular'. Inaasahan kong ngayon mayroon kang isang ideya kung paano mo maipapatupad ang isang dropdown menu sa iyong sariling proyekto. Kung mayroon kang anumang mga pag-aalinlangan tungkol sa blog na ito maaari mong mai-post ang mga ito bilang isang komento sa seksyon ng komento sa ibaba. Maaari mo ring ibahagi ang iyong sariling malikhaing paraan ng paggawa ng isang dropdown box din.

java c ++ python

Kung nais mong matuto nang higit pa tungkol sa Angular framework, pagkatapos ay suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Tutulungan ka ng pagsasanay na ito na maunawaan ang malalim na Angular at tutulong sa iyo na makamit ang mastery sa paksa.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng 'Angular Dropdown' at babalik ako sa iyo.