Tietyn arkipäivän tehtävien oppiminen ja parantaminen Angularin avulla voi parantaa urasi melko nopeasti, varsinkin jos olet uusi . Tässä artikkelissa keskustelemme yhdestä sellaisesta tehtävästä, jonka kehittäjän on täytynyt tehdä tuhansia kertoja: luoda nöyrä pudotusvalikko. Seuraavat aiheet käsitellään tässä blogissa:
Mikä on kulmikas?
No, jos luet blogia siitä, kuinka tehdä pudotusvalikko Angularilla, voidaan olettaa, että sinulla on jo yleinen käsitys Angularista. Niille teistä, jotka eivät ole törmänneet tähän blogiin Internetin mielihyvän ja mielikuvituksen vuoksi, on etupään kehityskehys. Sitä kehittää ja ylläpitää teknologiajätti Google. Se tarjoaa modulaarisen tavan kehittää yhden sivun verkkosovelluksia, kuten Gmail, PayPal ja Lego. Kulma-sovelluksella rakennetut sovellukset toteuttavat Model-View-View-Model-lähestymistavan.
Mikä on pudotusvalikko?
Pudotusvalintaruutu on puhdas tapa näyttää joukko vaihtoehtoja, koska vain yksi valinta näytetään aluksi, kunnes käyttäjä aktivoi avattavan ruudun. Jos haluat lisätä avattavan valintaruudun verkkosivulle, käytä a valitse elementti tai a luettelokohde . Valitun elementin ensimmäisessä tagissa valitun vaihtoehdon on oltava asetettu valitun arvon mukaiseksi. Tässä on pieni koodinpätkä, joka näyttää mitä tarkoitan.
Vaihtoehto 1 Vaihtoehto 2 Vaihtoehto 3
Tietenkin yllä oleva koodi tarvitsee sen erityisen javascriptin odottaakseen käyttäytymistä, mutta avattavan valikon perusrunko pysyy samana. Katsotaanpa, miten teemme tämän nyt Angularissa.
matriisin javascriptin pituus
Avattava valintaruutu, jossa on kulma
Rehellisesti sanottuna olisi melko pelottavaa osoittaa kaikki mahdolliset tapat toteuttaa pudotusvalikko kulmikkaasti. Jokaisen kehittäjän aivot käsittelevät logiikkaa omalla ainutlaatuisella tavallaan, ja olen nähnyt urallani hulluja pudotusvalikkoja. Olen nöyrä ja näytän teille melko yksinkertaisen pudotusvalikkotavan.
Tapa 1: Pudotusluettelon luominen ng-option avulla
Voit käyttää ng-vaihtoehtoja luoda pudotusvalikko taulukosta tai kohteiden luettelosta.
var app = kulmainen moduuli ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Tapa 2: Avattavan luettelon luominen ng-repeat-toiminnolla
Kulma on monipuolinen , on tietysti useita tapoja luoda avattava valikko. Ng-repeat -direktiivi toistaa HTML-koodilohkon jokaiselle matriisin kohteelle, sitä voidaan käyttää luomaan vaihtoehtoja pudotusvalikossa, mutta ng-options-direktiivi tehtiin erityisesti avattavan luettelon täyttämiseksi vaihtoehdoilla ja sillä on yksi tärkeä etu eli ng-options -toiminnolla tehdyt pudotusvalikot sallivat valitun arvon olla objekti, kun taas ng-repeat-valikosta tehtävän pudotusvalikon on oltava merkkijono.
kuinka nostaa jotain voimaksi java
Tämä erityinen koodinpätkä toteuttaa saman luettelon ng-repeat-toiminnolla
{{name}} var app = kulmamoduuli ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Tämä vie meidät tämän melko lyhyen blogin 'avattavan luettelon kulma-alkuun' loppuun. Toivon, että sinulla on nyt idea siitä, kuinka voit toteuttaa avattavan valikon omassa projektissasi. Jos sinulla on epäilyksiä tästä blogista, voit lähettää ne kommenttina alla olevaan kommenttiosioon. Voit myös jakaa oman luovasi tapasi tehdä pudotusvalikko.
Jos haluat oppia lisää kulmakehyksestä, tutustu meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus auttaa sinua ymmärtämään kulma syvällisesti ja auttaa saavuttamaan aiheen hallinnan.
Onko sinulla kysymys meille? Mainitse se ”Angular Dropdown” -kommenttiosassa ja palaan sinuun.