Az „ng-model” használata az AngularJS-ben a PÉLDÁK segítségével

By: James Hartman James Hartman
Hours korszerűsített

⚡ Okos összefoglaló

Az AngularJS-ben lévő ng-model egy bemeneti vezérlőt közvetlenül a $scope egy tulajdonságához köt, keeping A nézet és a modell mindkét irányban szinkronizálva van. Az alábbi szakaszok az attribútumot, három működő példát és a kezdők által leggyakrabban elkövetett hibákat tárgyalják.

  • 🔗 Kétirányú kötés: Az ng-model a felhasználói bemenetet a $scope tulajdonságba helyezi, és a vezérlő módosításait automatikusan visszaküldi a vezérlőbe.
  • 📝 Szövegterület kötése: Köss egy többsoros karakterláncot egy szövegterülethez, és használd a \n escape szekvenciát sortörések kikényszerítéséhez a megjelenített értékben.
  • ☑️ Jelölőnégyzet állapota: Az ng-model-lel kötött jelölőnégyzet egy logikai értéket tárol, tehát az igaz érték bejelöltként, a hamis érték pedig üresen hagyja a jelölőnégyzetet.
  • 📋 Legördülő listák: Töltse ki a select elemet ng-options paraméterekkel, és kösse a kiválasztott elemet egy különálló model tulajdonsághoz.
  • ⚠️ Gyakori hibák: Ha egy kijelölésnek ugyanahhoz az objektumhoz van kötve, amely a beállítási szöveget is megadta, akkor az az objektum felülíródik az első kijelöléskor.
  • 🇧🇷 Érvényesítési hookok: Az ng-model ng-pristine, ng-dirty, ng-valid és ng-invalid osztályokat ad hozzá, amelyek feltételes stílust és űrlapellenőrzést hajtanak végre.
További információk

Mi az ng-model az AngularJS-ben?

Az ng-model egy AngularJS direktíva, amely a modellt reprezentálja, és elsődleges célja a „nézet” és a „modell” összekapcsolása. Bármit is ír be a felhasználó egy vezérlőbe, az egyenesen egy tulajdonságba íródik a $scope, és bármit is ír a vezérlő az adott tulajdonságba, az egyenesen visszakerül a vezérlőbe.

Tegyük fel például, hogy egy egyszerű oldalt szeretne megjeleníteni a végfelhasználónak, mint az alább látható, amely arra kéri a felhasználót, hogy adja meg a „Keresztnév” és a „Vezetéknév” adatokat szövegmezőkben. Ezután biztosítani szeretné, hogy a felhasználó által megadott információk tárolva legyenek az adatmodellben.

Az ng-model direktívával leképezheted a „Keresztnév” és a „Vezetéknév” szövegmezőit az adatmodelledhez. Az direktíva biztosítja, hogy a „nézet” és a „modell” adatai végig szinkronban legyenek, egyetlen sornyi eseménykezelő kód nélkül.

⚠️ Verzió megjegyzés: Az AngularJS (az 1.x ág) 2021. december 31-én elérte az élettartama végét, és már nem kap biztonsági javításokat. Az alábbi példák továbbra is futnak, de a modern Angularban ugyanaz a kétirányú kötés a következőképpen íródik: [(ngModel)] és megköveteli a FormsModule-t.

Az ng-modell attribútum

Amint azt a fenti szakaszban tárgyaltuk, az ng-model attribútum arra szolgál, hogy a modellben lévő adatokat a felhasználónak megjelenített nézettel kötjük.

Az ng-model attribútumot a következő esetekben használják:

  1. Vezérlőelemek, például beviteli mező, szövegmező és kijelölő elemek összekapcsolása a nézetben a modellel.
  2. Érvényesítési viselkedés biztosítása – például egy szövegmezőhöz hozzáadható egy érvényesítés, hogy csak numerikus karaktereket lehessen beírni.
  3. A vezérlő állapotának fenntartása. Állapot alatt azt értjük, hogy a vezérlő és az adatok mindig szinkronban vannak: ha az adatok értéke megváltozik, a vezérlőben lévő érték automatikusan megváltozik, és fordítva.
  4. CSS osztályokként megjelenítve ezt az állapotot. Az AngularJS hozzáadja ng-pristine, ng-dirty, ng-valid és a ng-invalid minden ng-modellt hordozó vezérlőhöz, ami egyszerűvé teszi az űrlapok feltételes formázását.

Miután megértettük az attribútumot, a következő lépés az, hogy alkalmazzuk azt a három leggyakrabban előforduló vezérlési típusra.

Hogyan kell használni az ng-modellt

1) Szöveg terület

A szövegterület címke többsoros szövegbeviteli vezérlő meghatározására szolgál. A szövegterület korlátlan számú karaktert tartalmazhat, és a szöveg fix szélességű betűtípussal jelenik meg.

Most nézzünk egy egyszerű példát arra, hogyan adhatjuk hozzá az ng-model direktívát egy szövegmező-vezérlőhöz. Ebben a példában bemutatjuk, hogyan adhatunk át egy többsoros karakterláncot a vezérlőből a nézetbe, és hogyan rendelhetjük hozzá ezt az értéket a szövegmező-vezérlőhöz.

<!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 Magyarázat:

  1. Az ng-modell direktíva csatolja a „p” nevű tagváltozótDescription” a „textarea” vezérlőhöz. A „p”DescriptAz „ion” változó tartalmazza a szöveget, amelyet átadnak a szövegmező vezérlőjének. rows="4" és a cols="50" Az attribútumok egyszerűen úgy méretezik a vezérlőt, hogy a többsoros szöveg megfelelően jelenjen meg.
  2. A „p” tagváltozóDescript„ion” egy többsoros értéket kap. \n A karakterláncon belüli escape-szekvencia az, ami a szöveget a második sorba kényszeríti, amikor a textarea megjeleníti azt.

output:

A kimenetből egyértelműen látszik, hogy a vezérlőben hozzárendelt többsoros szöveg a szövegmező vezérlőjében jelenik meg, két sorra osztva, pontosan ott, ahol a \n ül.

KAPCSOLÓDÓ CIKKEK

2) Bemeneti elemek

Az ng-model direktíva hagyományos bemeneti elemekkel is működik. Az alábbiakban egy szövegdobozt és két jelölőnégyzetet kötünk össze egyszerre, így láthatjuk, hogyan kezeli az ng-model egymás mellett a karakterlánc-értéket és a logikai értéket.

<!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 Magyarázat:

  1. Az ng-model direktíva a „pname” tagváltozót a szövegbeviteli vezérlőhöz csatolja, és a tulajdonságokat Topic.Controller és a Topic.Models a két jelölőnégyzet-vezérlőhöz.
  2. A vezérlőben a „pname” a következő karakterláncot kapja: „Guru99”, és a „Topic” objektum két logikai elemet kap. Az ng-model-lel kötött jelölőnégyzet mindig logikai értéket olvas és ír, ezért true a négyzetet bejelöltként jeleníti meg, és false tisztán hagyja.

output:

A kimenetből,

  • Jól látható, hogy a hozzárendelt érték pname változó a „Guru99. "
  • Mivel az első korlát értéke true, a „Vezérlő” jelölőnégyzet be van jelölve. Hasonlóképpen, mivel a második érték false, a „Modellek” jelölőnégyzet nincs bejelölve.

3) Válassza ki az elemet a legördülő menüből

Az ng-model direktíva a select elemre is alkalmazható, így a felhasználó által kiválasztott elem a modellben tárolódik.

Itt egy szöveges bemenetet fogunk látni, amely a következő nevet tartalmazza: „Guru99”, és egy két listaelemmel rendelkező kiválasztó lista: „Vezérlő” és „Modellek”.

⚠️ Javítás: A fenti képernyőkép az eredeti listát mutatja, amely a select elemet ugyanarra a listára kötötte. Topics objektum, amely a beállítási szöveget adta meg. Abban a pillanatban, amikor a felhasználó kiválaszt egy opciót, az AngularJS felülírja Topics a kiválasztott karakterlánccal, és mindkét opció eltűnik. Az alábbi javított lista a listát az egyik tulajdonságban, a kijelölést pedig egy másikban tartja, és a következőt használja: ng-options hogy felépítsem a listát.

<!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 Magyarázat:

  1. A szövegbevitel ehhez van kötve: pName, és a select elem a következőhöz van kötve: selectedTopicMivel a select rendelkezik saját model tulajdonsággal, egy opció kiválasztása soha nem zavarja meg magát a listát.
  2. Az Topics A tömb a két értéket tartalmazza: a „Controller” és a „Modells”. ng-options A kifejezés végigjárja a tömböt, és bejegyzésenként egy opciót jelenít meg, így egy harmadik témakör hozzáadása nem igényli a jelölés módosítását.
  3. selectedTopic az első bejegyzésre van előre beállítva, ami miatt a legördülő menü értelmes alapértelmezés szerint nyílik meg egy üres sor helyett.

output:

A kimenetből látható, hogy a hozzárendelt érték a pName változó a „Guru99”, a kiválasztási vezérlő pedig a „Vezérlő” és a „Modellek” lehetőségeket kínálja fel. A működő példákon kívül a kötések néha megtagadják a frissítést, és érdemes tudni az okokat.

Miért hibásodnak meg néha az ng-modell kötések?

A legtöbb jelentett ng-modellprobléma nem az AngularJS hibája, hanem a hatókörök és primitívek működésének következménye.

A klasszikus eset egy olyan kötés, amelyet egy direktívába helyeznek, és amely egy gyermek hatókört hoz létre, például ng-ismétlés, ng-if vagy ng-switch. Írás ng-model="name" árnyékmásolatot hoz létre a gyermek hatókörén, így a szülő soha nem látja a szerkesztést. Ehelyett egy objektum tulajdonságához kötődik — ng-model="user.name" — minden hatókört ugyanarra a referenciára mutat. Ez az oka annak, hogy a tapasztalt AngularJS fejlesztők ragaszkodnak egy ponthoz minden ng-model kifejezésben.

A fennmaradó rész nagy részét további két ok magyarázza:

  • Hiányzó vezérlő vagy modul: Ha az ng-app vagy az ng-controller paramétert helytelenül írták be, a kötés hibajelzés helyett csendben nem jelenít meg semmit.
  • Az érték az AngularJS-en kívül változott: Egy jQuery kezelőből vagy setTimeout hívásból beállított érték a kivonatolási cikluson kívülre esik, így a nézet addig nem frissül, amíg $scope.$apply() fut.

E három dolog ellenőrzése megoldja a látszólag nem működő kötések nagy részét.

GYIK

Az ng-bind egyirányú: egy modellértéket nyomtat ki egy elembe. Az ng-model kétirányú, és csak űrlapvezérlőkön működik, így a felhasználói bevitel visszaáramlik a modellbe és ki is onnan.

Adjuk hozzá az ng-model-options paramétereket, például: ng-model-options=”{ debounce: 500 }”. Az AngularJS ezután fél másodpercet vár az utolsó billentyűleütés után, mielőtt frissíti a modellt, ami hasznos a kérést kiváltó keresőmezőknél.

Nagyrészt igen. Az AI asszisztensek átírják az ng-model-t [(ngModel)]-re, és hozzáadják a FormsModule importálást. A reaktív űrlapok, az egyéni elemzők és a $formatters folyamatok továbbra is manuális ellenőrzést igényelnek, mivel az Angular nagyon eltérően modellezi őket.

A mesterséges intelligencia eszközei gyorsan ellenőrzik a szokásos gyanús elemeket: egy primitív kötést egy gyermek hatókörön belül, egy elgépelt vezérlőnevet és egy a kivonatolási cikluson kívül hozzárendelt értéket. Mindegyik csendes hibát eredményez, nem pedig konzolhibát.

Csak a „szám” típusú bemeneti azonosító értelmezése történik numerikus értékké. A „szöveg” típusú vezérlő mindig karakterláncot eredményez, így a === értékkel való összehasonlítás sikertelen. Konvertálja explicit módon, vagy váltson bemeneti típust.

Foglald össze ezt a bejegyzést a következőképpen: