Kuinka käyttää "ng-mallia" AngularJS:ssä ESIMERKKEJÄ

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS:n ng-malli sitoo syöteohjausobjektin suoraan $scope-ominaisuuteen, keeping Näkymä ja malli synkronoitu molempiin suuntiin. Alla olevat osiot käsittelevät ominaisuutta, kolmea toimivaa esimerkkiä ja aloittelijoiden useimmin kohtaamia virheitä.

  • 🔗 Kaksisuuntainen sidonta: ng-model työntää käyttäjän syötteen $scope-ominaisuuteen ja työntää ohjaimen muutokset takaisin ohjaukseen automaattisesti.
  • 📝 Tekstialueen sidonta: Sido monirivinen merkkijono tekstialueeseen ja käytä \n-ohjausmerkkijonoa pakottaaksesi rivinvaihdot renderöityyn arvoon.
  • ☑️ Valintaruudun tila: ng-mallilla sidottu valintaruutu tallentaa totuusarvon, joten true tekee ruudusta valitun ja false jättää sen tyhjäksi.
  • 📋 Alasvetovalikot: Täytä select-elementti ng-optioilla ja sido valittu kohde erilliseen model-ominaisuuteen.
  • ⚠️ Yleinen vika: Valinnan sitominen samaan objektiin, joka antaa sen asetustekstin, korvaa kyseisen objektin ensimmäisessä valinnassa.
  • 🛠️ Validointikoukut: ng-model lisää ng-koskematon, ng-likainen, ng-valid ja ng-invalid luokat, jotka ohjaavat ehdollista tyyliä ja lomaketarkistuksia.
Lue lisää

Mikä on ng-malli AngularJS:ssä?

ng-model on AngularJS:n direktiivi, joka edustaa mallia, ja sen ensisijainen tarkoitus on sitoa "näkymä" "malliin". Kaikki, mitä käyttäjä kirjoittaa ohjausobjektiin, kirjoitetaan suoraan ominaisuuteen $scope, ja kaikki, mitä ohjain kirjoittaa kyseiseen ominaisuuteen, lähetetään suoraan takaisin ohjaukseen.

Oletetaan esimerkiksi, että haluat esitellä loppukäyttäjälle yksinkertaisen sivun, kuten alla olevan kuvan mukainen, jossa käyttäjää pyydetään syöttämään "Etunimi" ja "Sukunimi" tekstiruutuihin. Ja sitten haluat varmistaa, että tallennat käyttäjän syöttämät tiedot tietomalliisi.

Voit käyttää ng-model-direktiiviä yhdistääksesi "Etunimi"- ja "Sukunimi"-tekstiruutukentät tietomalliisi. Direktiivi varmistaa, että "näkymän" ja "mallisi" tiedot pysyvät synkronoituina koko ajan ilman riviäkään tapahtumienkäsittelykoodia.

⚠️ Versiohuomautus: AngularJS (1.x-haara) saavutti elinkaarensa lopun 31. joulukuuta 2021, eikä se enää saa tietoturvapäivityksiä. Alla olevat esimerkit toimivat edelleen, mutta nykyaikaisessa Angularissa sama kaksisuuntainen sidonta kirjoitetaan muodossa [(ngModel)] ja vaatii FormsModule-moduulin.

ng-mallin ominaisuus

Kuten yllä olevassa osiossa käsiteltiin, ng-model-attribuuttia käytetään mallisi tietojen sitomiseen käyttäjälle esitettyyn näkymään.

Attribuuttia ng-model käytetään

  1. Näkymän syöttö-, tekstialue- ja valintaelementtien sitominen malliin.
  2. Vahvistustoiminnon tarjoaminen – esimerkiksi tekstiruutuun voidaan lisätä vahvistus, jotta vain numeerisia merkkejä voidaan syöttää.
  3. Kontrollin tilan ylläpitäminen. Tilalla tarkoitamme, että kontrolli ja data pidetään aina synkronoituna: jos datan arvo muuttuu, kontrollin arvo muuttuu automaattisesti ja päinvastoin.
  4. Tuon tilan paljastaminen CSS-luokkina. AngularJS lisää ng-pristine, ng-dirty, ng-valid ja ng-invalid jokaiselle ng-mallia sisältävälle ohjausobjektille, mikä tekee lomakkeiden ehdollisen muotoilun yksinkertaiseksi.

Kun ominaisuus on ymmärretty, seuraava vaihe on soveltaa sitä kolmeen useimmin tapaamaasi ohjaustyyppiin.

Kuinka käyttää ng-mallia

1) Tekstialue

Tekstialueen tunnistetta käytetään monirivisen tekstinsyötön ohjauksen määrittämiseen. Tekstialueelle mahtuu rajoittamaton määrä merkkejä, ja teksti hahmonnetaan kiinteäleveällä fontilla.

Katsotaanpa nyt yksinkertaista esimerkkiä siitä, kuinka voimme lisätä ng-model-direktiivin tekstialueen ohjausobjektiin. Tässä esimerkissä haluamme näyttää, kuinka voimme välittää monirivisen merkkijonon ohjausobjektista näkymään ja liittää kyseisen arvon tekstialueen ohjausobjektiin.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        <textarea rows="4" cols="50" ng-model="pDescription"></textarea>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS";
    });
</script>
</body>
</html>

Code Selitys:

  1. ng-mallin direktiivi liittää jäsenmuuttujan nimeltä ”p”Description” tekstialueen ohjausobjektiin. ”p”Description”-muuttuja sisältää tekstin, joka välitetään tekstialueen ohjaukseen. rows="4" ja cols="50" attribuutit yksinkertaisesti muuttavat ohjausobjektin kokoa niin, että monirivinen teksti näkyy oikein.
  2. Jäsenmuuttuja ”pDescription” -komennolle annetaan monirivinen arvo. \n Merkkijonon sisällä oleva koodinvaihtomerkkijono pakottaa tekstin toiselle riville, kun tekstialue renderöi sen.

lähtö:

Tulosteesta on selvää, että ohjaimeen määritetty monirivinen teksti näkyy tekstialueen ohjauksessa jaettuna kahdelle riville täsmälleen siinä kohdassa, missä \n istuu.

AIHEESEEN LIITTYVÄT ARTIKKELIT

2) Syöttöelementit

ng-model-direktiivi toimii myös tavallisten syöttöelementtien kanssa. Alla sidomme tekstiruudun ja kaksi valintaruutua samanaikaisesti, joten näet, miten ng-model käsittelee merkkijonoarvon ja totuusarvon rinnakkain.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pname"><br>
        Topic :<br>
        <input type="checkbox" ng-model="Topic.Controller">Controller<br>
        <input type="checkbox" ng-model="Topic.Models">Models
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pname = "Guru99";

        $scope.Topic = {
            Controller: true,
            Models: false
        };
    });
</script>
</body>
</html>

Code Selitys:

  1. ng-model-direktiivi liittää jäsenmuuttujan ”pname” tekstinsyöttöelementtiin ja ominaisuudet Topic.Controller ja Topic.Models kahteen valintaruutuun.
  2. Ohjaimessa ”pname”:lle annetaan merkkijono ”Guru99”, ja ”Topic”-objektille annetaan kaksi totuusarvon jäsentä. ng-model-funktiolla sidottu valintaruutu lukee ja kirjoittaa aina totuusarvon, minkä vuoksi true renderöi ruudun valituksi ja false jättää sen selväksi.

lähtö:

Ulostulosta,

  • Voidaan selvästi nähdä, että sille annettu arvo pname muuttuja on "Guru99. "
  • Koska ensimmäinen rajattu arvo on true, valintaruutu ”Ohjain”-valintaruutua varten on merkitty. Samoin, koska toinen arvo on false, ”Mallit”-valintaruutua ei ole valittu.

3) Valitse elementti pudotusvalikosta

ng-model-direktiiviä voidaan soveltaa myös select-elementtiin, jolloin käyttäjän valitsema kohde tallennetaan malliin.

Tässä meillä on tekstisyöttö, jossa on nimi "Guru99”, ja valintaluettelo, jossa on kaksi luettelokohtaa: ”Ohjain” ja ”Mallit”.

⚠️ Korjaus: Yllä olevassa kuvakaappauksessa näkyy alkuperäinen listaus, joka sitoi valintaelementin täsmälleen samaan Topics objekti, joka antoi vaihtoehdon tekstin. Heti kun käyttäjä valitsee vaihtoehdon, AngularJS korvaa Topics valitulla merkkijonolla ja molemmat vaihtoehdot katoavat. Alla oleva korjattu lista pitää listan yhdessä ominaisuudessa ja valinnan toisessa ja käyttää ng-options listan rakentamiseksi.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pName"><br>
        Topic :<br>
        <!-- Topics holds the list; selectedTopic holds the choice -->
        <select ng-model="selectedTopic" ng-options="t for t in Topics"></select>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pName = "Guru99";

        $scope.Topics = ["Controller", "Models"];
        $scope.selectedTopic = $scope.Topics[0];
    });
</script>
</body>
</html>

Code Selitys:

  1. Tekstisyöttö on sidottu pName, ja valintaelementti on sidottu selectedTopicKoska select-funktiolla on oma malliominaisuus, vaihtoehdon valitseminen ei koskaan muuta itse listaa.
  2. Topics taulukko sisältää kaksi arvoa: ”Controller” ja ”Models”. ng-options lauseke käy läpi taulukon ja renderöi yhden vaihtoehdon merkintää kohden, joten kolmannen aiheen lisääminen ei vaadi muutoksia merkintään.
  3. selectedTopic on esiasetettu ensimmäiseen merkintään, minkä vuoksi alasvetovalikko avautuu järkevällä oletusarvolla tyhjän rivin sijaan.

lähtö:

Tulosteesta voidaan nähdä, että annettu arvo pName muuttuja on "Guru99”, ja valintaohjausobjekti tarjoaa vaihtoehdot ”Ohjain” ja ”Mallit”. Käytännön esimerkkejä lukuun ottamatta sidokset joskus kieltäytyvät päivittymästä, ja syyt tähän ovat syytä tietää.

Miksi ng-mallin sidokset joskus epäonnistuvat

Useimmat raportoidut ng-mallin ongelmat eivät ole AngularJS:n bugeja, vaan seurauksia siitä, miten osiopalkit ja primitiivit toimivat.

Klassinen tapaus on sidonta, joka sijoitetaan direktiivin sisään ja luo alilaajuuden, kuten ng-toista, ng-if tai ng-switch. Kirjoittaminen ng-model="name" luo varjokopion alikohteeseen, joten vanhempi ei koskaan näe muokkausta. Sidotaan sen sijaan objektin ominaisuuteen — ng-model="user.name" — pitää jokaisen oskilloskoopin osoittamassa samaan referenssiin. Tästä syystä kokeneet AngularJS-kehittäjät vaativat pistettä jokaisessa ng-mallin lausekkeessa.

Kaksi muuta syytä selittävät suurimman osan lopusta:

  • Puuttuva ohjain tai moduuli: Jos ng-app tai ng-controller on kirjoitettu väärin, sidonta ei renderöi mitään hiljaa virheen aiheuttamisen sijaan.
  • Arvo muuttui AngularJS:n ulkopuolella: jQuery-käsittelijän tai setTimeout-kutsun asettama arvo päätyy tiivistesyklin ulkopuolelle, joten näkymä ei päivity ennen kuin $scope.$apply() kulkee.

Näiden kolmen asian tarkistaminen ratkaisee suurimman osan toimimattomista sidonnaisuuksista.

UKK

ng-bind on yksisuuntainen: se tulostaa mallin arvon elementtiin. ng-model on kaksisuuntainen ja toimii vain lomake-elementtien kanssa, joten käyttäjän syöte virtaa takaisin malliin sekä siitä ulos.

Lisää ng-model-options, esimerkiksi ng-model-options=”{ debounce: 500 }”. AngularJS odottaa sitten puoli sekuntia viimeisen näppäinpainalluksen jälkeen ennen mallin päivittämistä, mikä on hyödyllistä pyynnön käynnistäville hakukentille.

Pääosin kyllä. Tekoälyavustajat kirjoittavat ng-model-mallin uudelleen muotoon [(ngModel)] ja lisäävät FormsModel-tuonnin. Reaktiiviset lomakkeet, mukautetut jäsentimet ja $formatters-putket vaativat edelleen manuaalisen tarkistuksen, koska Angular mallintaa ne hyvin eri tavalla.

Tekoälytyökalut tarkistavat nopeasti tavanomaiset epäillyt: primitiivirajan alilaajuuden sisällä, väärin kirjoitetun ohjaimen nimen ja tiivistesyklin ulkopuolella annetun arvon. Jokainen tuottaa hiljaisen virheen konsolivirheen sijaan.

Vain syötetyyppi=”number” jäsennetään numeeriseksi arvoksi. Type=”text”-ohjausobjekti tuottaa aina merkkijonon, joten vertailut ===-merkillä epäonnistuvat. Muunna eksplisiittisesti tai vaihda syötetyyppi.

Tiivistä tämä viesti seuraavasti: