Sådan bruger du "ng-model" i AngularJS med EKSEMPLER

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

ng-model i AngularJS binder et inputkontrolelement direkte til en egenskab på $scope, keeping Visningen og modellen synkroniseres i begge retninger. Afsnittene nedenfor dækker attributten, tre fungerende eksempler og de fejl, som begyndere støder på oftest.

  • 🔗 Tovejsbinding: ng-model sender brugerinput til $scope-egenskaben og sender automatisk ændringer i controlleren tilbage til kontrollen.
  • 📝 Tekstområdebinding: Bind en streng med flere linjer til et tekstområde, og brug \n escape-sekvensen til at gennemtvinge linjeskift i den gengivne værdi.
  • ☑️ Afkrydsningsfelts status: Et afkrydsningsfelt bundet med ng-model gemmer en boolsk værdi, så sandt gengiver feltet som markeret, og falsk efterlader det tomt.
  • ???? Rullelister: Udfyld et select-element med ng-options, og bind det valgte element til en separat modelegenskab.
  • ⚠️ Almindelig fejl: Hvis en select-værdi bindes til det samme objekt, der leverer dens indstillingstekst, overskrives det pågældende objekt i den første select-værdi.
  • 🛠️ Valideringskroge: ng-model tilføjer ng-urørte, ng-beskidte, ng-gyldige og ng-ugyldige klasser, der driver betinget styling og formulartjek.
Læs mere

Hvad er ng-model i AngularJS?

ng-model er en direktiv i AngularJS, der repræsenterer modellen, og dens primære formål er at binde "view" til "modellen". Uanset hvad brugeren skriver i en kontrol, skrives det direkte ind i en property på $scope, og hvad end controlleren skriver til den egenskab, skubbes direkte tilbage i kontrollen.

Lad os for eksempel antage, at du vil præsentere en simpel side for slutbrugeren som den nedenfor viste, hvor brugeren bliver bedt om at indtaste "Fornavn" og "Efternavn" i tekstfelter. Og så vil du sikre dig, at du gemmer de oplysninger, brugeren har indtastet, i din datamodel.

Du kan bruge ng-model-direktivet til at knytte tekstfelterne "Fornavn" og "Efternavn" til din datamodel. Direktivet sikrer, at dataene i "visningen" og dataene i din "model" holdes synkroniserede hele tiden, uden en eneste linje hændelseshåndteringskode.

⚠️ Versionsnotat: AngularJS (1.x-grenen) nåede slutningen af ​​sin levetid den 31. december 2021 og modtager ikke længere sikkerhedsrettelser. Eksemplerne nedenfor kører stadig, men i moderne Angular skrives den samme tovejsbinding som [(ngModel)] og kræver FormsModulet.

ng-modellens egenskab

Som beskrevet i afsnittet ovenfor bruges ng-model-attributten til at binde dataene i din model til den visning, der præsenteres for brugeren.

ng-model attributten bruges til,

  1. Bindende kontroller såsom input, tekstområde og valg af elementer i visningen i modellen.
  2. Angiver en valideringsadfærd — for eksempel kan en validering tilføjes til et tekstfelt, så kun numeriske tegn kan indtastes.
  3. Opretholdelse af kontrollens tilstand. Med tilstand mener vi, at kontrollen og dataene altid holdes synkroniserede: hvis dataværdien ændres, ændres værdien i kontrollen automatisk, og omvendt.
  4. Viser den tilstand som CSS-klasser. AngularJS tilføjer ng-pristine, ng-dirty, ng-valid og ng-invalid til alle kontrolelementer, der bærer en ng-model, hvilket er det, der gør betinget styling af formularer ligetil.

Når attributten er forstået, er næste trin at anvende den på de tre kontroltyper, du oftest vil støde på.

Sådan bruger du ng-modellen

1) Tekstområde

Tekstområdemærket bruges til at definere en multi-line tekstinputkontrol. Tekstområdet kan indeholde et ubegrænset antal tegn, og teksten gengives i en skrifttype med fast bredde.

Lad os nu se på et simpelt eksempel på, hvordan vi kan tilføje ng-model-direktivet til et tekstområdekontrolelement. I dette eksempel vil vi vise, hvordan vi kan sende en flerlinjet streng fra controlleren til viewet og knytte den værdi til tekstområdekontrollen.

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

  1. ng-model direktiv vedhæfter medlemsvariablen kaldet "p"Description” til “textarea”-kontrollen. “pDescriptVariablen "ion" indeholder den tekst, der sendes videre til tekstområdekontrollen. rows="4" og cols="50" attributter justerer blot størrelsen på kontrollen, så teksten med flere linjer vises korrekt.
  2. Medlemsvariablen "pDescript"ion" tildeles en værdi på flere linjer. \n Escape-sekvensen inde i strengen er det, der tvinger teksten over på en anden linje, når textarea gengiver den.

Output:

Ud fra outputtet er det tydeligt, at den flerlinjede tekst, der er tildelt i controlleren, vises i tekstområdekontrollen, opdelt over to linjer præcis der, hvor \n sidder.

RELATEREDE ARTIKLER

2) Indgangselementer

ng-model-direktivet fungerer også med almindelige inputelementer. Nedenfor binder vi en tekstboks og to afkrydsningsfelter på samme tid, så du kan se, hvordan ng-model håndterer en strengværdi og en boolsk værdi side om side.

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

  1. ng-model-direktivet knytter medlemsvariablen "pname" til tekstinputkontrollen, og egenskaberne Topic.Controller og Topic.Models til de to afkrydsningsfelter.
  2. I controlleren får "pname" strengen "Guru99", og objektet "Emne" får to boolske medlemmer. En afkrydsningsfelt bundet med ng-model læser og skriver altid en boolsk værdi, hvilket er grunden til true gengiver boksen som markeret og false lader det være klart.

Output:

Fra udgangen,

  • Det kan tydeligt ses, at den værdi, der tildeles pname variablen er "Guru99. "
  • Da den første bundne værdi er true, er afkrydsningsfeltet markeret for afkrydsningsfeltet "Controller". Ligeledes, da den anden værdi er false, afkrydsningsfeltet "Modeller" er ikke markeret.

3) Vælg element fra rullemenuen

ng-model-direktivet kan også anvendes på select-elementet, således at det element, brugeren vælger, gemmes i modellen.

Her har vi en tekstindtastning, der indeholder navnet "Guru99”, og en valgliste med to listeelementer, “Controller” og “Modeller”.

⚠️ Rettelse: Skærmbilledet ovenfor viser den oprindelige liste, som bandt select-elementet til det samme Topics objektet, der leverede teksten til valgmuligheden. I det øjeblik en bruger vælger en valgmulighed, overskriver AngularJS Topics med den valgte streng, og begge muligheder forsvinder. Den korrigerede liste nedenfor holder listen i én egenskab og markeringen i en anden, og bruger ng-options at opbygge listen.

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

  1. Tekstinputtet er bundet til pName, og SELECT-elementet er bundet til selectedTopicFordi select har sin egen model-egenskab, forstyrrer valg af en indstilling aldrig selve listen.
  2. Topics Arrayet indeholder de to værdier "Controller" og "Models". ng-options udtrykket gennemgår den array og gengiver én indstilling pr. post, så tilføjelse af et tredje emne kræver ingen ændring af markup'en.
  3. selectedTopic er forudindstillet til den første post, hvilket er det, der får rullemenuen til at åbne med en fornuftig standard i stedet for en tom række.

Output:

Ud fra outputtet kan det ses, at den værdi, der er tildelt pName variablen er "Guru99", og select-kontrollen tilbyder mulighederne "Controller" og "Modeller". Bortset fra arbejdseksempler, nægter bindinger nogle gange at opdatere, og årsagerne er værd at kende.

Hvorfor ng-model-bindinger nogle gange fejler

De fleste rapporterede ng-modelproblemer er ikke fejl i AngularJS, men konsekvenser af, hvordan scopes og primitiver fungerer.

Det klassiske tilfælde er en binding placeret inde i en direktiv, der opretter et underordnet omfang, f.eks. ng-gentag, ng-if eller ng-switch. Skrivning ng-model="name" der opretter en skyggekopi på det underordnede scope, så den overordnede aldrig ser redigeringen. Binding til en egenskab for et objekt i stedet — ng-model="user.name" — holder alle scopes pegende på den samme reference. Dette er grunden til, at erfarne AngularJS-udviklere insisterer på en prik i alle ng-modeludtryk.

To yderligere årsager tegner sig for størstedelen af ​​resten:

  • Manglende controller eller modul: Hvis ng-app eller ng-controller er stavet forkert, gengiver bindingen ingenting i lydløshed i stedet for at generere en fejl.
  • Værdi ændret uden for AngularJS: Et værdisæt fra en jQuery-handler eller et setTimeout-tilbagekald lander uden for digest-cyklussen, så visningen opdateres ikke, før $scope.$apply() kørsler.

Ved at kontrollere disse tre ting løses langt de fleste bindinger, der tilsyneladende ikke virker.

Ofte Stillede Spørgsmål

ng-bind er envejs: den udskriver en modelværdi i et element. ng-model er tovejs og fungerer kun på formularkontroller, så brugerinput flyder tilbage i modellen såvel som ud af den.

Tilføj ng-model-options, for eksempel ng-model-options=”{ debounce: 500 }”. AngularJS venter derefter et halvt sekund efter det sidste tastetryk, før modellen opdateres, hvilket er nyttigt for søgefelter, der udløser en anmodning.

Stort set, ja. AI-assistenter omskriver ng-model til [(ngModel)] og tilføjer FormsModule-importen. Reaktive formularer, brugerdefinerede parsere og $formatters-pipelines kræver stadig manuel gennemgang, fordi Angular modellerer dem meget forskelligt.

AI-værktøjer tjekker hurtigt de sædvanlige mistænkte: en primitiv grænse inden for et underordnet område, et forkert stavet controllernavn og en værdi tildelt uden for digest-cyklussen. Hver af dem producerer en stille fejl snarere end en konsolfejl.

Kun input type="number" parses til en numerisk værdi. En type="text"-kontrol giver altid en streng, så sammenligninger med === mislykkes. Konverter eksplicit, eller skift inputtype.

Opsummer dette indlæg med: