Kako koristiti “ng-model” u AngularJS s PRIMJERIMA

Što je ng-model u AngularJS?

ng-model je direktiva u AngularJS-u koja predstavlja model, a njezina je primarna svrha vezati "pogled" s "modelom". Sve što korisnik upiše u kontrolu, zapisuje se izravno u svojstvo na $scope, i sve što kontroler zapiše u to svojstvo vraća se izravno u kontrolu.

Na primjer, pretpostavimo da želite krajnjem korisniku predstaviti jednostavnu stranicu poput one prikazane u nastavku, koja od korisnika traži da unese „Ime“ i „Prezime“ u tekstne okvire. A zatim želite osigurati da pohranite podatke koje je korisnik unio u svoj podatkovni model.

Možete koristiti direktivu ng-model za mapiranje polja tekstualnih okvira "Ime" i "Prezime" na vaš model podataka. Direktiva će osigurati da se podaci u "pogledu" i vašem "modelu" cijelo vrijeme sinkroniziraju, bez ijedne linije koda za obradu događaja.

⚠️ Napomena o verziji: AngularJS (grana 1.x) dosegao je kraj svog životnog vijeka 31. prosinca 2021. i više ne prima sigurnosne zakrpe. Primjeri u nastavku i dalje se izvode, ali u modernom Angularu isto dvosmjerno povezivanje zapisano je kao [(ngModel)] i zahtijeva FormsModule.

Atribut ng-modela

Kao što je objašnjeno u gornjem odjeljku, atribut ng-model koristi se za povezivanje podataka u vašem modelu s prikazom koji se prikazuje korisniku.

Atribut ng-model koristi se za,

1. Povezivanje kontrola kao što su unos, tekstualno područje i odabir elemenata u prikazu s modelom.
2. Pružanje ponašanja validacije - na primjer, validacija se može dodati u tekstni okvir tako da se mogu unositi samo numerički znakovi.
3. Održavanje stanja kontrole. Pod stanjem podrazumijevamo da su kontrola i podaci uvijek sinkronizirani: ako se vrijednost podataka promijeni, vrijednost u kontroli se automatski mijenja i obrnuto.
4. Izlaganje tog stanja kao CSS klasa. AngularJS dodaje ng-pristine, ng-dirty, ng-valid i ng-invalid svakoj kontroli koja nosi ng-model, što uvjetno stiliziranje obrazaca čini jednostavnim.

Nakon što smo razumjeli atribut, sljedeći korak je primijeniti ga na tri vrste kontrola koje ćete najčešće susresti.

Kako koristiti ng-model

1) Područje teksta

Oznaka područja teksta koristi se za definiranje kontrole unosa teksta u više redaka. Područje teksta može sadržavati neograničen broj znakova, a tekst se prikazuje u fontu fiksne širine.

Dakle, pogledajmo sada jednostavan primjer kako možemo dodati direktivu ng-model kontroli tekstualnog područja. U ovom primjeru želimo pokazati kako možemo proslijediti višelinijski niz iz kontrolera u prikaz i priložiti tu vrijednost kontroli tekstualnog područja.

<!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 Objašnjenje:

1. The direktiva ng-model pridružuje varijablu člana pod nazivom „pDescript"ion" na kontrolu "textarea". "p"DescriptVarijabla "ion" sadrži tekst koji se prosljeđuje kontroli područja teksta. rows="4" i cols="50" Atributi jednostavno mijenjaju veličinu kontrole tako da se višeredni tekst ispravno prikazuje.
2. Članska varijabla "p"Descript"ion" je dodijeljena višelinijska vrijednost. \n Escape sekvenca unutar niza prisiljava tekst u drugi redak kada ga tekstualno područje prikazuje.

Izlaz:

Iz izlaza je jasno da se višelinijski tekst dodijeljen u kontroleru prikazuje u kontroli tekstualnog područja, podijeljen u dva retka točno tamo gdje je \n sjedi.

2) Ulazni elementi

Direktiva ng-model radi i s običnim ulaznim elementima. U nastavku istovremeno povezujemo tekstualni okvir i dva potvrdna okvira, tako da možete vidjeti kako ng-model rukuje nizom znakova i logičkom vrijednošću jednu pored druge.

<!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 Objašnjenje:

1. Direktiva ng-model pridružuje varijablu člana "pname" kontroli za unos teksta i svojstvima Topic.Controller i Topic.Models na dva kontrolna okvira.
2. U kontroleru, "pname" je dodijeljen niz znakova "Guru99”, a objektu “Topic” dodijeljena su dva logička člana. Potvrdni okvir vezan s ng-modelom uvijek čita i zapisuje logičku vrijednost, zbog čega true prikazuje okvir kao označen i false ostavlja to jasnim.

Izlaz:

Iz izlaza,

• Jasno se vidi da je vrijednost dodijeljena pname varijabla je "Guru99”.
• Budući da je prva ograničena vrijednost true, potvrdni okvir je označen za potvrdni okvir „Kontroler“. Slično tome, budući da je druga vrijednost false, potvrdni okvir za potvrdni okvir „Modeli“ nije označen.

3) Odaberite element s padajućeg izbornika

Direktiva ng-model se također može primijeniti na element select, tako da se stavka koju korisnik odabere pohranjuje u modelu.

Ovdje ćemo imati tekstualni unos koji sadrži naziv "Guru99” i popis za odabir s dvije stavke popisa, „Kontroler” i „Modeli”.

⚠️ Ispravak: Gornja snimka zaslona prikazuje izvorni popis, koji je element select vezao za isti Topics objekt koji je dao tekst opcije. U trenutku kada korisnik odabere opciju, AngularJS prepisuje Topics s odabranim nizom i obje opcije nestaju. Ispravljeni popis u nastavku zadržava popis u jednom svojstvu, a odabir u drugom, te koristi ng-options za izgradnju popisa.

<!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 Objašnjenje:

1. Unos teksta je vezan za pName, a odabrani element je vezan na selectedTopicBudući da select ima vlastito svojstvo modela, odabir opcije nikada ne remeti samu listu.
2. The Topics Niz sadrži dvije vrijednosti „Controller“ i „Models“. ng-options izraz obilazi taj niz i prikazuje jednu opciju po unosu, tako da dodavanje treće teme ne zahtijeva promjenu označavanja.
3. selectedTopic je unaprijed postavljen na prvi unos, što uzrokuje da se padajući izbornik otvori s razumnom zadanom postavkom umjesto praznog retka.

Izlaz:

Iz izlaza se može vidjeti da je vrijednost dodijeljena pName varijabla je "Guru99”, a kontrola select nudi opcije „Controller” i „Modeli”. Osim primjera rada, povezivanja ponekad odbijaju ažurirati, a razloge vrijedi znati.

Zašto povezivanja ng-modela ponekad ne uspiju

Većina prijavljenih problema s ng-modelom nisu greške u AngularJS-u, već posljedice načina na koji rade opseg i primitivi.

Klasičan slučaj je vezanje smješteno unutar direktive koja stvara podređeni opseg, kao što je ng-ponovi, ng-if ili ng-switch. Pisanje ng-model="name" stvara se sjena kopija na podređenom opsegu, tako da roditelj nikada ne vidi uređivanje. Umjesto toga, vezanje na svojstvo objekta — ng-model="user.name" — održava svaki opseg usmjeren na istu referencu. To je razlog zašto iskusni AngularJS programeri inzistiraju na točki u svakom izrazu ng-modela.

Dva daljnja uzroka objašnjavaju većinu ostalog:

• Nedostaje kontroler ili modul: Ako su ng-app ili ng-controller pogrešno napisani, vezanje tiho ne prikazuje ništa umjesto da izazove grešku.
• Vrijednost promijenjena izvan AngularJS-a: Vrijednost postavljena iz jQuery rukovatelja ili povratnog poziva setTimeout završava izvan ciklusa sažetka, tako da se prikaz ne osvježava dok $scope.$apply() staze.

Provjera te tri stvari rješava veliku većinu vezanja koja ne rade.

Pitanja i odgovori