Jak používat „ng-model“ v AngularJS s PŘÍKLADY

⚡ Chytré shrnutí

ng-model v AngularJS váže vstupní ovládací prvek přímo na vlastnost v $scope, keeping Pohled a model synchronizované v obou směrech. Následující části se zabývají atributem, třemi funkčními příklady a chybami, kterých se začátečníci nejčastěji dopouštějí.

🔗 Obousměrná vazba: ng-model automaticky vkládá uživatelský vstup do vlastnosti $scope a změny kontroleru zpět do ovládacího prvku.
???? Vazba textového pole: Navažte víceřádkový řetězec na textové pole a použijte escape sekvenci \n k vynucení zalomení řádků ve vykreslené hodnotě.
☑️ Stav zaškrtávacího políčka: Zaškrtávací políčko vázané na ng-model ukládá booleovskou hodnotu, takže hodnota true vykreslí políčko jako zaškrtnuté a hodnota false jej ponechá prázdné.
???? Rozbalovací seznamy: Naplňte element select pomocí ng-options a propojte vybranou položku se samostatnou vlastností modelu.
⚠️ Časté selhání: Vazba výběru na stejný objekt, který poskytuje text jeho volby, přepíše tento objekt při prvním výběru.
🛠️ Validační háčky: ng-model přidává třídy ng-pristine, ng-dirty, ng-valid a ng-invalid, které řídí podmíněný styl a kontroly formulářů.

Přečíst více

Co je ng-model v AngularJS?

ng-model je direktiva v AngularJS, která reprezentuje model a jejím primárním účelem je svázat „view“ s „modelem“. Cokoli uživatel zadá do ovládacího prvku, je zapsáno přímo do vlastnosti na $scopea cokoli kontroler zapíše do této vlastnosti, je vloženo přímo zpět do ovládacího prvku.

Předpokládejme například, že chcete koncovému uživateli zobrazit jednoduchou stránku, jako je ta níže, která uživatele požádá o zadání „křestního jména“ a „příjmení“ do textových polí. A pak chcete zajistit, aby se informace, které uživatel zadal, uložily do vašeho datového modelu.

Pomocí direktivy ng-model můžete namapovat textová pole „Jméno“ a „Příjmení“ na váš datový model. Direktiva zajistí, že data v „pohledu“ a ve vašem „modelu“ budou po celou dobu synchronizována, bez jediného řádku kódu pro zpracování událostí.

⚠️ Poznámka k verzi: AngularJS (větev 1.x) dosáhl konce své podpory k 31. prosinci 2021 a již nedostává bezpečnostní záplaty. Níže uvedené příklady stále běží, ale v moderním Angularu je stejná obousměrná vazba zapsána jako [(ngModel)] a vyžaduje FormsModule.

Atribut modelu ng

Jak je uvedeno v předchozí části, atribut ng-model se používá k propojení dat ve vašem modelu s pohledem zobrazeným uživateli.

Atribut ng-model se používá pro,

Propojení ovládacích prvků, jako je vstup, textové pole a prvky výběru v pohledu, s modelem.
Zajištění ověřovacího chování – například lze do textového pole přidat ověření, aby bylo možné zadávat pouze číselné znaky.
Udržování stavu ovládacího prvku. Stavem myslíme, že ovládací prvek a data jsou vždy synchronizovány: pokud se změní hodnota dat, automaticky se změní hodnota v ovládacím prvku a naopak.
Zpřístupnění tohoto stavu jako CSS tříd. AngularJS přidává ng-pristine, ng-dirty, ng-valid a ng-invalid ke každému ovládacímu prvku nesoucímu ng-model, což usnadňuje podmíněné stylování formulářů.

Jakmile atribut pochopíme, dalším krokem je jeho použití na tři typy ovládacích prvků, se kterými se setkáte nejčastěji.

Jak používat ng-model

1) Textová oblast

Značka textové oblasti se používá k definování ovládacího prvku pro víceřádkový text. Textová oblast pojme neomezený počet znaků a text se vykresluje písmem s pevnou šířkou.

Nyní se podívejme na jednoduchý příklad, jak můžeme přidat direktivu ng-model do ovládacího prvku textového pole. V tomto příkladu chceme ukázat, jak můžeme předat víceřádkový řetězec z kontroleru do zobrazení a připojit tuto hodnotu k ovládacímu prvku textového pole.

<!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 Vysvětlení:

Jedno ng-model směrnice připojí členskou proměnnou s názvem „pDescript„ion“ do ovládacího prvku „textarea“. „p“DescriptProměnná „ion“ obsahuje text, který je předáván do ovládacího prvku textového pole. rows="4" a cols="50" Atributy jednoduše upravují velikost ovládacího prvku tak, aby se víceřádkový text zobrazoval správně.
Členská proměnná „pDescript„ion“ je přiřazena víceřádková hodnota. \n Úniková sekvence uvnitř řetězce vynutí přesun textu na druhý řádek, když jej textarea vykreslí.

Výstup:

Z výstupu je zřejmé, že víceřádkový text přiřazený v kontroleru se zobrazí v textovém poli, rozdělený na dva řádky přesně tam, kde je \n sedí.

2) Vstupní prvky

Direktiva ng-model pracuje i s běžnými vstupními prvky. Níže navážeme textové pole a dvě zaškrtávací políčka současně, abyste viděli, jak ng-model zpracovává řetězcovou hodnotu a booleovskou hodnotu vedle sebe.

<!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 Vysvětlení:

Direktiva ng-model připojuje členskou proměnnou „pname“ k textovému vstupu a vlastnosti Topic.Controller a Topic.Models k oběma ovládacím políčkům.
V kontroleru je proměnné „pname“ přiřazen řetězec „Guru99“ a objektu „Topic“ jsou přiřazeny dva booleovské členy. Zaškrtávací políčko vázané na ng-model vždy čte a zapisuje booleovskou hodnotu, a proto true vykreslí políčko jako zaškrtnuté a false nechává to jasné.

Výstup:

Z výstupu,

Je jasně vidět, že hodnota přiřazená pname proměnná je „Guru99. "
Protože první vázaná hodnota je true, zaškrtávací políčko je zaškrtnuto u zaškrtávacího políčka „Řadič“. Podobně, protože druhá hodnota je false, zaškrtávací políčko „Modely“ není zaškrtnuto.

3) Vyberte prvek z rozbalovací nabídky

Direktivu ng-model lze také použít na element select, takže položka, kterou si uživatel vybere, se uloží do modelu.

Zde budeme mít textový vstup s názvem „Guru99“ a seznam výběru se dvěma položkami seznamu, „Řadič“ a „Modely“.

⚠️ Oprava: Výše uvedený snímek obrazovky ukazuje původní výpis, který vázal element select na ten samý Topics objekt, který poskytl text možnosti. V okamžiku, kdy uživatel vybere možnost, AngularJS ji přepíše Topics s vybraným řetězcem a obě možnosti zmizí. Opravený výpis níže uchovává seznam v jedné vlastnosti a výběr v jiné a používá ng-options k sestavení seznamu.

<!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 Vysvětlení:

Vstup textu je vázán na pNamea element select je vázán na selectedTopicProtože má select svou vlastní vlastnost modelu, výběr možnosti nikdy nenaruší samotný seznam.
Jedno Topics Pole obsahuje dvě hodnoty „Controller“ a „Models“. ng-options Výraz prochází tímto polem a vykresluje jednu možnost pro každou položku, takže přidání třetího tématu nevyžaduje žádnou změnu kódu.
selectedTopic je přednastaveno na první položku, což způsobí, že se rozbalovací nabídka otevře s rozumnou výchozí hodnotou místo prázdného řádku.

Výstup:

Z výstupu je patrné, že hodnota přiřazená pName proměnná je „Guru99“ a ovládací prvek select nabízí možnosti „Controller“ a „Modely“. Kromě pracovních příkladů se vazby někdy odmítají aktualizovat a důvody stojí za to znát.

Proč vazby ng-model někdy selhávají

Většina hlášených problémů s ng-modelem nejsou chyby v AngularJS, ale důsledky fungování oborů a primitiv.

Klasickým případem je vazba umístěná uvnitř direktivy, která vytváří podřízený obor platnosti, například ng-opakovat, ng-if nebo ng-switch. Psaní ng-model="name" vytvoří stínovou kopii v podřízeném oboru, takže rodič nikdy neuvidí úpravu. Místo toho se použije vazba na vlastnost objektu — ng-model="user.name" — udržuje každý rozsah ukazující na stejnou referenci. To je důvod, proč zkušení vývojáři AngularJS trvají na tečce v každém výrazu ng-modelu.

Většinu zbytku tvoří dvě další příčiny:

Chybí řídicí jednotka nebo modul: Pokud je ng-app nebo ng-controller napsáno chybně, vazba tiše nevykreslí nic, místo aby vyvolala chybu.
Hodnota změněna mimo AngularJS: Hodnota nastavená z obslužné rutiny jQuery nebo zpětného volání setTimeout přistane mimo cyklus digest, takže se zobrazení neobnoví, dokud $scope.$apply() běží.

Kontrola těchto tří věcí vyřeší velkou většinu vazeb, které se zdají nefungovat.

Nejčastější dotazy

ng-bind je jednosměrný: vypíše hodnotu modelu do elementu. ng-model je obousměrný a funguje pouze s ovládacími prvky formuláře, takže uživatelský vstup proudí zpět do modelu i z něj.

Přidejte ng-model-options, například ng-model-options=”{ debounce: 500 }”. AngularJS pak po posledním stisknutí klávesy čeká půl sekundy, než aktualizuje model, což je užitečné pro vyhledávací pole, která spouštějí požadavek.

Z velké části ano. Asistenti umělé inteligence přepisují ng-model jako [(ngModel)] a přidávají import FormsModule. Reaktivní formuláře, vlastní parsery a pipeline $formatters stále vyžadují manuální kontrolu, protože Angular je modeluje velmi odlišně.

Nástroje umělé inteligence rychle kontrolují obvyklé podezřelé: primitivní vazbu uvnitř podřízeného rozsahu, chybně napsaný název kontroleru a hodnotu přiřazenou mimo cyklus digest. Každá z nich způsobí tiché selhání, nikoli chybu konzole.

Pouze vstup typu „číslo“ je analyzován na číselnou hodnotu. Ovládací prvek typu „text“ vždy vrátí řetězec, takže porovnání s === selže. Konvertujte explicitně nebo přepněte typ vstupu.

Jak používat „ng-model“ v AngularJS s PŘÍKLADY

Co je ng-model v AngularJS?

Atribut modelu ng

Jak používat ng-model

1) Textová oblast

2) Vstupní prvky

3) Vyberte prvek z rozbalovací nabídky

Proč vazby ng-model někdy selhávají

Nejčastější dotazy

Shrňte tento příspěvek takto:

Přihlaste se k odběru newsletteru

Co je ng-model v AngularJS?

Atribut modelu ng

Jak používat ng-model

1) Textová oblast

SOUVISEJÍCÍ ČLÁNKY

2) Vstupní prvky

3) Vyberte prvek z rozbalovací nabídky

Proč vazby ng-model někdy selhávají

Nejčastější dotazy

Shrňte tento příspěvek takto:

Přihlaste se k odběru newsletteru