Hvordan bruke "ng-modell" i AngularJS med EKSEMPLER

by: James Hartman James Hartman
Hours oppdatert

⚡ Smart oppsummering

ng-modellen i AngularJS binder en inputkontroll direkte til en egenskap på $scope, keeping visningen og modellen synkronisert i begge retninger. Avsnittene nedenfor dekker attributtet, tre fungerende eksempler og feilene nybegynnere støter på oftest.

  • 🔗 Toveisbinding: ng-model sender brukerinput til $scope-egenskapen og sender kontrollerendringer tilbake til kontrollen automatisk.
  • 📝 Tekstområdebinding: Bind en streng med flere linjer til et tekstområde og bruk \n escape-sekvensen for å tvinge frem linjeskift i den gjengitte verdien.
  • ☑️ Avmerkingsboksstatus: En avmerkingsboks bundet med ng-model lagrer en boolsk verdi, så true gjengir boksen som avkrysset og false lar den være tom.
  • ???? Nedtrekkslister: Fyll et select-element med ng-alternativer og bind det valgte elementet til en separat modellengenskap.
  • ⚠️ Vanlig feil: Hvis du binder en select-verdi til det samme objektet som leverer alternativteksten, overskrives det objektet i den første select-verdien.
  • 🛠️ Valideringskroker: ng-modellen legger til ng-urørte, ng-skitne, ng-gyldige og ng-ugyldige klasser som driver betinget styling og skjemasjekker.
Les mer

Hva er ng-modell i AngularJS?

ng-model er et direktiv i AngularJS som representerer modellen, og hovedformålet er å binde «viewet» til «modellen». Alt brukeren skriver inn i en kontroll skrives direkte inn i en egenskap på $scope, og det kontrolleren skriver til den egenskapen, sendes rett tilbake til kontrollen.

La oss for eksempel si at du ønsker å presentere en enkel side for sluttbrukeren, som den som er vist nedenfor, der brukeren blir bedt om å skrive inn «Fornavn» og «Etternavn» i tekstbokser. Deretter ønsker du å sørge for at du lagrer informasjonen brukeren har lagt inn i datamodellen din.

Du kan bruke ng-model-direktivet til å tilordne tekstboksfeltene «Fornavn» og «Etternavn» til datamodellen din. Direktivet vil sørge for at dataene i «visningen» og dataene i «modellen» din holdes synkroniserte hele tiden, uten en eneste linje med hendelseshåndteringskode.

⚠️ Versjonsmerknad: AngularJS (1.x-grenen) nådde slutten av sin levetid 31. desember 2021 og mottar ikke lenger sikkerhetsoppdateringer. Eksemplene nedenfor kjører fortsatt, men i moderne Angular skrives den samme toveisbindingen som [(ngModel)] og krever FormsModule.

ng-modellens attributt

Som omtalt i avsnittet ovenfor, brukes ng-model-attributtet til å binde dataene i modellen din til visningen som presenteres for brukeren.

ng-modellattributtet brukes til,

  1. Bindende kontroller som input, tekstområde og valg av elementer i visningen inn i modellen.
  2. Tilby en valideringsvirkemåte – for eksempel kan en validering legges til i en tekstboks slik at bare numeriske tegn kan skrives inn.
  3. Opprettholde kontrollens tilstand. Med tilstand mener vi at kontrollen og dataene alltid holdes synkroniserte: hvis verdien av dataene endres, endres verdien i kontrollen automatisk, og omvendt.
  4. Viser den tilstanden som CSS-klasser. AngularJS legger til ng-pristine, ng-dirty, ng-valid og ng-invalid til hver kontroll som har en ng-modell, noe som gjør betinget styling av skjemaer enkel.

Når attributtet er forstått, er neste trinn å bruke det på de tre kontrolltypene du vil møte oftest.

Hvordan bruke ng-modellen

1) Tekstområde

Tekstområde-taggen brukes til å definere en flerlinjers tekstinntastingskontroll. Tekstområdet kan inneholde et ubegrenset antall tegn, og teksten gjengis i en skrift med fast bredde.

La oss nå se på et enkelt eksempel på hvordan vi kan legge til ng-model-direktivet i en tekstområdekontroll. I dette eksemplet ønsker vi å vise hvordan vi kan sende en flerlinjestreng fra kontrolleren til visningen og knytte den verdien 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. Ocuco ng-modell direktiv legger til medlemsvariabelen kalt «p»Description» til «textarea»-kontrollen. «p»DescriptVariabelen «ion» inneholder teksten som sendes videre til tekstområdekontrollen. rows="4" og cols="50" attributter justerer ganske enkelt størrelsen på kontrollen slik at teksten med flere linjer vises riktig.
  2. Medlemsvariabelen «p»Descript«ion» tildeles en verdi på flere linjer. \n Escape-sekvensen inne i strengen er det som tvinger teksten over på en andre linje når textarea gjengir den.

Utgang:

Fra utdataene er det tydelig at den flerlinjede teksten som er tilordnet i kontrolleren vises i tekstområdekontrollen, delt over to linjer nøyaktig der \n sitter.

RELATERTE ARTIKLER

2) Inndataelementer

ng-model-direktivet fungerer også med vanlige input-elementer. Nedenfor binder vi en tekstboks og to avmerkingsbokser samtidig, slik at du kan se hvordan ng-model håndterer en strengverdi og en boolsk verdi 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 medlemsvariabelen «pname» til tekstinndatakontrollen, og egenskapene Topic.Controller og Topic.Models til de to avmerkingsbokskontrollene.
  2. I kontrolleren får «pname» strengen «Guru99», og «Topic»-objektet får to boolske medlemmer. En avmerkingsboks bundet med ng-model leser og skriver alltid en boolsk verdi, og det er derfor true gjengir boksen som avkrysset og false lar det være klart.

Utgang:

Fra utgangen,

  • Det kan tydelig sees at verdien som er tildelt pname variabelen er «Guru99. "
  • Siden den første bundne verdien er true, er avmerkingsboksen merket av for avmerkingsboksen «Kontroller». På samme måte, siden den andre verdien er false, er ikke avmerkingsboksen for «Modeller».

3) Velg element fra rullegardinmenyen

ng-model-direktivet kan også brukes på select-elementet, slik at elementet brukeren velger lagres i modellen.

Her vil vi ha en tekstinndata som inneholder navnet «Guru99», og en valgliste med to listeelementer, «Kontroller» og «Modeller».

⚠️ Rettelse: Skjermbildet ovenfor viser den opprinnelige oppføringen, som bandt select-elementet til det samme Topics objektet som leverte alternativteksten. I det øyeblikket en bruker velger et alternativ, overskriver AngularJS Topics med den valgte strengen, og begge alternativene forsvinner. Den korrigerte oppføringen nedenfor beholder listen i én egenskap og valget i en annen, og bruker ng-options å bygge 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. Tekstinputen er bundet til pName, og select-elementet er bundet til selectedTopicFordi select-funksjonen har sin egen modell-egenskap, forstyrrer det aldri selve listen å velge et alternativ.
  2. Ocuco Topics Arrayet inneholder de to verdiene «Kontroller» og «Modeller». ng-options uttrykket bruker den matrisen og gjengir ett alternativ per oppføring, så det å legge til et tredje emne krever ingen endring i markupen.
  3. selectedTopic er forhåndsinnstilt til den første oppføringen, som er det som gjør at rullegardinmenyen åpnes med en fornuftig standard i stedet for en tom rad.

Utgang:

Fra utdataene kan man se at verdien som er tilordnet til pName variabelen er «Guru99», og select-kontrollen tilbyr alternativene «Controller» og «Models». Bortsett fra arbeidseksempler, nekter bindinger noen ganger å oppdatere, og årsakene er verdt å vite.

Hvorfor ng-modellbindinger noen ganger mislykkes

De fleste rapporterte ng-modellproblemene er ikke feil i AngularJS, men konsekvenser av hvordan omfang og primitiver fungerer.

Det klassiske tilfellet er en binding plassert inne i et direktiv som oppretter et underordnet omfang, for eksempel ng-gjenta, ng-if eller ng-switch. Skriving ng-model="name" der opprettes en skyggekopi på det underordnede omfanget, slik at den overordnede aldri ser redigeringen. Binding til en egenskap til et objekt i stedet — ng-model="user.name" — sørger for at alle omfang peker mot samme referanse. Dette er grunnen til at erfarne AngularJS-utviklere insisterer på en prikk i alle ng-modelluttrykk.

To ytterligere årsaker står for mesteparten av resten:

  • Mangler kontroller eller modul: Hvis ng-app eller ng-controller er feilstavet, gjengir bindingen ingenting i stille grad i stedet for å generere en feil.
  • Verdi endret utenfor AngularJS: Et verdisett fra en jQuery-håndterer eller et setTimeout-tilbakekall lander utenfor digest-syklusen, slik at visningen ikke oppdateres før $scope.$apply() runs.

Å sjekke disse tre tingene løser de aller fleste bindinger som ser ut til å ikke fungere.

Spørsmål og svar

ng-bind er enveis: den skriver ut en modellverdi i et element. ng-model er toveis og fungerer bare på skjemakontroller, slik at brukerinput flyter tilbake inn i modellen så vel som ut av den.

Legg til ng-model-options, for eksempel ng-model-options=”{ debounce: 500 }”. AngularJS venter deretter et halvt sekund etter siste tastetrykk før modellen oppdateres, noe som er nyttig for søkebokser som utløser en forespørsel.

Stort sett, ja. AI-assistenter omskriver ng-modellen som [(ngModel)] og legger til FormsModule-importen. Reaktive skjemaer, tilpassede parsere og $formatters-pipelines trenger fortsatt manuell gjennomgang, fordi Angular modellerer dem veldig forskjellig.

AI-verktøy sjekker de vanlige mistenkte raskt: en primitiv grense innenfor et underordnet omfang, et feilstavet kontrollernavn og en verdi tilordnet utenfor digest-syklusen. Hver av dem produserer en stille feil i stedet for en konsollfeil.

Bare input type="number" analyseres til en numerisk verdi. En type="text"-kontroll gir alltid en streng, så sammenligninger med === mislykkes. Konverter eksplisitt, eller bytt inputtype.

Oppsummer dette innlegget med: