Kuidas kasutada „ng-mudelit” AngularJS-is koos NÄIDETEGA

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS-i ng-mudel seob sisendjuhtimise otse $scope'i atribuudiga, keeping vaade ja mudel on mõlemas suunas sünkroniseeritud. Allolevad osad käsitlevad atribuuti, kolme töötavat näidet ja vigu, millega algajad kõige sagedamini kokku puutuvad.

  • 🔗 Kahesuunaline sidumine: ng-model lükkab kasutaja sisendi $scope atribuuti ja lükkab kontrolleri muudatused automaatselt tagasi juhtpaneelile.
  • 📝 Tekstiala sidumine: Seo mitmerealine string tekstialaga ja kasuta \n paosjärjestust, et sundida renderdatud väärtuses reavahetusi.
  • ☑️ Märkeruudu olek: Ng-mudeliga seotud märkeruut salvestab tõeväärtuse, seega „true“ muudab kasti märgituks ja „false“ jätab selle tühjaks.
  • ???? Rippmenüüd: Täitke valitud element ng-optsioonidega ja siduge valitud objekt eraldi mudeli atribuudiga.
  • ⚠️ Levinud tõrge: Valiku sidumine sama objektiga, mis annab selle valiku teksti, kirjutab selle objekti esimese valiku korral üle.
  • 🛠️ Valideerimiskonksud: ng-mudel lisab ng-põlised, ng-dirty, ng-valid ja ng-invalid klassid, mis juhivad tingimuslikku stiili ja vormikontrolli.
Loe rohkem

Mis on AngularJS-is ng-mudel?

ng-model on AngularJS-is direktiiv, mis esindab mudelit ja mille peamine eesmärk on siduda „vaade“ „mudeliga“. Kõik, mida kasutaja juhtelementi sisestab, kirjutatakse otse omadusse. $scopeja kõik, mida kontroller sellele atribuudile kirjutab, lükatakse otse tagasi juhtpaneelile.

Näiteks oletame, et soovite lõppkasutajale kuvada lihtsat lehte, nagu allpool näidatud, kus kasutajal palutakse sisestada tekstikastidesse eesnimi ja perekonnanimi. Seejärel soovite tagada, et salvestate kasutaja sisestatud teabe oma andmemudelisse.

Tekstiväljade „Eesnimi“ ja „Perekonnanimi“ oma andmemudeliga sidumiseks saate kasutada direktiivi ng-model. See direktiiv tagab, et „vaate“ ja „mudeli“ andmed hoitakse kogu aeg sünkroonis ilma ühegi sündmuste käitlemise koodireata.

⚠️ Versiooni märkus: AngularJS (haru 1.x) jõudis 31. detsembril 2021 oma eluea lõppu ja ei saa enam turvaparandusi. Allolevad näited töötavad endiselt, kuid tänapäevases Angularis kirjutatakse sama kahesuunaline sidumine järgmiselt: [(ngModel)] ja nõuab FormsModule'i.

ng-mudeli atribuut

Nagu eelmises jaotises käsitletud, kasutatakse atribuuti ng-model teie mudeli andmete sidumiseks kasutajale esitatava vaatega.

Atribuuti ng-model kasutatakse

  1. Vaate elementide (nt sisend, tekstiala ja valiku) sidumise juhtelemendid mudeliga.
  2. Valideerimiskäitumise pakkumine – näiteks saab tekstiväljale lisada valideerimise, et sisestada saaks ainult numbreid.
  3. Juhtelemendi oleku säilitamine. Oleku all peame silmas seda, et juhtelement ja andmed hoitakse alati sünkroonis: kui andmete väärtus muutub, muutub automaatselt ka juhtelemendi väärtus ja vastupidi.
  4. Selle oleku kuvamine CSS-klassidena. AngularJS lisab ng-pristine, ng-dirty, ng-valid ja ng-invalid igale ng-mudelit kandvale juhtelemendile, mis teeb vormide tingimusliku kujundamise lihtsaks.

Kui atribuut on selge, on järgmine samm selle rakendamine kolmele kõige sagedamini esinevale juhtimistüübile.

Kuidas ng-mudelit kasutada

1) Tekstiala

Tekstiala silti kasutatakse mitmerealise tekstisisestuse juhtelemendi määratlemiseks. Tekstialal võib olla piiramatu arv tähemärke ja tekst renderdatakse fikseeritud laiusega kirjas.

Vaatame nüüd lihtsat näidet, kuidas lisada tekstivälja juhtelemendile ng-model direktiiv. Selles näites tahame näidata, kuidas edastada kontrollerist vaatele mitmerealine string ja siduda see väärtus tekstivälja juhtelemendiga.

<!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 Selgitus:

  1. . ng-mudeli direktiiv lisab liikmemuutuja nimega „p”Descriptioon” tekstiala juhtelemendile. „p”DescriptMuutuja „ion” sisaldab teksti, mis edastatakse tekstivälja juhtelemendile. rows="4" ja cols="50" Atribuudid lihtsalt muudavad juhtelemendi suurust nii, et mitmerealine tekst kuvatakse õigesti.
  2. Liikmemuutuja „pDescript„ioonile” omistatakse mitmerealine väärtus. \n Stringi sees olev põgenemisjada sunnib teksti teisele reale, kui tekstiala seda renderdab.

Väljund:

Väljundist on selge, et kontrolleris määratud mitmerealine tekst kuvatakse tekstivälja juhtelemendis kahele reale jaotatuna täpselt seal, kus \n istub.

SEOTUD ARTIKLID

2) Sisendelemendid

ng-model direktiiv töötab ka tavaliste sisendelementidega. Allpool seome korraga tekstikasti ja kaks märkeruutu, et näha, kuidas ng-model käsitleb stringväärtust ja tõeväärtust kõrvuti.

<!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 Selgitus:

  1. ng-model direktiiv seob liikmemuutuja „pname“ tekstisisestusjuhtelemendiga ja omadused Topic.Controller ja Topic.Models kahe märkeruudu juhtelemendi juurde.
  2. Kontrolleris antakse funktsioonile „pname” string „Guru99” ja „Topic” objektile antakse kaks tõeväärtusliiget. ng-mudeliga seotud märkeruut loeb ja kirjutab alati tõeväärtust, mistõttu true renderdab kasti märgituks ja false jätab selle selgeks.

Väljund:

Väljundist,

  • On selgelt näha, et määratud väärtus pname muutuja on "Guru99. "
  • Kuna esimene seotud väärtus on true, on märkeruut „Kontroller” märgitud. Samamoodi, kuna teine ​​väärtus on false, pole märkeruut „Mudelid” märgitud.

3) Valige rippmenüüst element

ng-model direktiivi saab rakendada ka valikuelemendile, nii et kasutaja valitud objekt salvestatakse mudelisse.

Siin on meil tekstisisestus, mis sisaldab nime „Guru99” ja valikute loend kahe loendiüksusega: „Kontroller” ja „Mudelid”.

⚠️ Parandus: Ülalolev ekraanipilt näitab algset kirjet, mis sidus valikuelemendi täpselt samaga Topics objekt, mis andis valiku teksti. Hetkel, kui kasutaja valiku teeb, kirjutab AngularJS üle Topics valitud stringiga ja mõlemad valikud kaovad. Allolev parandatud loend hoiab loendi ühes ja valiku teises atribuudis ning kasutab ng-options nimekirja koostamiseks.

<!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 Selgitus:

  1. Tekstisisestus on seotud pNameja valitud element on seotud selectedTopicKuna valikul „select” on oma „model” omadus, ei muuda valiku tegemine kunagi loendit ennast.
  2. . Topics Massiiv sisaldab kahte väärtust: „Controller” ja „Models”. ng-options avaldis läbib selle massiivi ja renderdab iga kirje kohta ühe valiku, seega kolmanda teema lisamine ei nõua märgistuse muutmist.
  3. selectedTopic on eelnevalt määratud esimesele kirjele, mistõttu rippmenüü avaneb mõistliku vaikimisi valikuga, mitte tühja reaga.

Väljund:

Väljundist on näha, et määratud väärtus pName muutuja on "Guru99” ja valikuline juhtelement pakub valikuid „Kontroller” ja „Modelid”. Töönäiteid kõrvale jättes keelduvad seosed mõnikord uuendamisest ja selle põhjuseid tasub teada.

Miks ng-mudeli sidumised mõnikord ebaõnnestuvad

Enamik teatatud ng-mudeli probleemidest ei ole AngularJS-i vead, vaid ulatuvate ja primitiivsete elementide tööpõhimõtte tagajärjed.

Klassikaline juhtum on sidumine, mis asetatakse direktiivi sisse, mis loob lapse ulatuse, näiteks ng-korda, ng-if või ng-switch. Kirjutamine ng-model="name" see loob lapse ulatusele varikoopia, seega vanem ei näe muudatust kunagi. Selle asemel sidutakse objekti atribuudiga — ng-model="user.name" — hoiab iga ulatuse osutamas samale viitepunktile. Sel põhjusel nõuavad kogenud AngularJS-i arendajad punkti igas ng-mudeli avaldises.

Enamiku ülejäänud osa põhjustab veel kaks põhjust:

  • Puuduv kontroller või moodul: Kui ng-app või ng-controller on valesti kirjutatud, siis sidumine ei renderda vaikselt midagi, vaid tekitab vea.
  • Väärtust muudeti väljaspool AngularJS-i: jQuery käitleja või setTimeout tagasihelistamise abil määratud väärtus jääb väljapoole kokkuvõtte tsüklit, seega vaadet ei värskendata enne $scope.$apply() jookseb.

Nende kolme asja kontrollimine lahendab enamiku mittetöötavatest seostest.

KKK

ng-bind on ühesuunaline: see prindib mudeli väärtuse elementi. ng-model on kahesuunaline ja töötab ainult vormi juhtelementidega, seega kasutaja sisend voolab nii mudelisse tagasi kui ka sellest välja.

Lisa ng-model-options, näiteks ng-model-options=”{ debounce: 500 }”. Seejärel ootab AngularJS pärast viimast klahvivajutust pool sekundit enne mudeli värskendamist, mis on kasulik päringu käivitavate otsingukastide puhul.

Suures osas küll. Tehisintellekti assistendid kirjutavad ng-model ümber kujule [(ngModel)] ja lisavad FormsModule impordi. Reaktiivsed vormid, kohandatud parserid ja $formatters torujuhtmed vajavad endiselt käsitsi ülevaatamist, kuna Angular modelleerib neid väga erinevalt.

Tehisintellekti tööriistad kontrollivad kiiresti tavapäraseid kahtlusaluseid: primitiivipiirangut lapse ulatuse sees, valesti kirjutatud kontrolleri nime ja väärtust, mis on määratud väljaspool kokkuvõtet. Igaüks neist tekitab vaikse vea, mitte konsoolivea.

Ainult sisendi tüüp =”number” parsitakse numbriliseks väärtuseks. Tüüp =”tekst” juhtelement annab alati stringi, seega võrdlused === abil ebaõnnestuvad. Teisendage selgesõnaliselt või vahetage sisendi tüüpi.

Võta see postitus kokku järgmiselt: