Jak používat „ng-model“ v AngularJS s PŘÍKLADY
James Hartman
Co je ng-model v AngularJs?
ng-model je směrnice v Angular.JS, která představuje modely a jejím primárním účelem je spojit „pohled“ s „modelem“.
Předpokládejme například, že chcete koncovému uživateli prezentovat jednoduchou stránku, jako je ta, která je zobrazena níže, která po uživateli požaduje zadání „Jméno“ a „Příjmení“ do textových polí. A pak jste chtěli zajistit, abyste uložili informace, které uživatel zadal do vašeho datového modelu.
Direktivu ng-model můžete použít k mapování polí textových polí „First name“ a „Last Name“ na váš datový model.
Direktiva ng-model zajistí, že data v „view“ a data vašeho „modelu“ budou po celou dobu synchronizována.
Atribut modelu ng
Jak je uvedeno v úvodu této kapitoly, atribut ng-model se používá k propojení dat ve vašem modelu s pohledem prezentovaným uživateli.
Atribut ng-model se používá pro,
- Ovládací prvky vazby, jako je vstup, textová oblast a výběry v pohledu do modelu.
- Poskytněte ověřovací chování – například lze do textového pole přidat ověření, že do textového pole lze zadat pouze číselné znaky.
- Atribut ng-model udržuje stav ovládacího prvku (Stavem rozumíme, že ovládací prvek a data musí být vždy synchronizována. Pokud se změní hodnota našich dat, automaticky změní hodnotu v ovládacím prvku a naopak)
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 tedy podívejme na jednoduchý příklad, jak můžeme přidat direktivu ng-model do ovládacího prvku textové oblasti.
V tomto příkladu chceme ukázat, jak můžeme předat víceřádkový řetězec z ovladače do pohledu a připojit tuto hodnotu k ovládacímu prvku textové oblasti.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</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>
Vysvětlení kódu:
- Jedno ng-model směrnice se používá k připojení členské proměnné s názvem „pDescription“ do ovládacího prvku „textarea“.Description“ bude ve skutečnosti obsahovat text, který bude předán ovládacímu prvku textové oblasti. Také jsme zmínili 2 atributy pro ovládací prvek textarea, což je rows=4 a cols=50. Tyto atributy byly zmíněny, abychom mohli zobrazit více řádků textu. Definováním těchto atributů bude mít nyní textarea 4 řádky a 50 sloupců, takže může zobrazovat více řádků textu.
- Zde připojujeme členskou proměnnou k objektu scope s názvem „pDescription“ a vložení řetězcové hodnoty do proměnné.
- Všimněte si, že do řetězce vkládáme literál /n, takže text může mít více řádků, když je zobrazen v textové oblasti. Literál /n rozdělí text na více řádků, takže jej lze v ovládacím prvku textarea vykreslit jako více řádků textu.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu,
- Je jasně vidět, že hodnota přiřazená pDescriptiontová proměnná jako součást objektu scope byla předána ovládacímu prvku textarea.
- Následně se zobrazí při načtení stránky.
2) Vstupní prvky
Direktivu ng-model lze také použít na vstupní prvky, jako je textové pole, zaškrtávací políčka, přepínače atd.
Podívejme se na příklad, jak můžeme použít ng-model s typem vstupu „textbox“ a „checkbox“.
Zde budeme mít typ zadávání textu, který bude mít název „Guru99“ a budou zde 2 zaškrtávací políčka, jedno, které bude ve výchozím nastavení označeno a druhé nebude označeno.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/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>
Vysvětlení kódu:
- Jedno ng-model směrnice se používá k připojení členské proměnné s názvem „pname“ k textovému ovládacímu prvku typu vstupu. Proměnná „pname“ bude obsahovat text „Guru99“, který bude předán ovládacímu prvku pro zadávání textu. Všimněte si, že názvu členské proměnné lze přiřadit libovolný název.
- Zde definujeme naše první zaškrtávací políčko „Controllers“, které je připojeno k členské proměnné Topics.Controllers. Zaškrtávací políčko bude označeno pro tento kontrolní prvek.
- Zde definujeme naše první zaškrtávací políčko „Models“, které je připojeno k členské proměnné Topics.Models. Zaškrtávací políčko nebude pro tento kontrolní prvek označeno.
- Zde připojujeme členskou proměnnou s názvem „pName“ a vkládáme hodnotu řetězce „Guru99“.
- Deklarujeme proměnnou pole členů s názvem „Topics“ a dáváme jí dvě hodnoty, první je „true“ a druhá je „false“. Takže když první zaškrtávací políčko získá hodnotu true, zaškrtávací políčko bude označeno pro tento ovládací prvek a podobně, protože druhá hodnota je nepravda, zaškrtávací políčko nebude pro tento ovládací prvek označeno.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu,
- Je jasně vidět, že hodnota přiřazená proměnné pName je „Guru99“
- Vzhledem k tomu, že první kontrolní hodnota je „pravda“, kterou prošla, je zaškrtávací políčko označeno pro zaškrtávací políčko „Ovladače“. Podobně, protože druhá hodnota je nepravdivá, není zaškrtávací políčko označeno pro zaškrtávací políčko „Modely“.
3) Vyberte prvek z rozbalovací nabídky
Direktivu ng-model lze také použít na prvek select a použít k naplnění položek seznamu ve výběrovém seznamu.
Podívejme se na příklad, jak můžeme použít ng-model s typem vstupu select.
Zde budeme mít typ zadávání textu, který bude mít název „Guru99“ a bude zde výběrový seznam se 2 položkami seznamu „Controller“ a „Models“.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/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" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- Jedno ng-model směrnice se používá k připojení členské proměnné s názvem „Topics“ k ovládacímu prvku typu select. Uvnitř ovládacího prvku select pro každou z možností připojujeme členskou proměnnou Topics.option1 pro první možnost a Topics.option2 pro druhou možnost.
- Zde definujeme naši proměnnou pole Témata, která obsahuje 2 páry klíč–hodnota. První pár má hodnotu „Controllers“ a druhý má hodnotu „Models“. Tyto hodnoty budou předány výběru vstupní značky v pohledu. Pokud je kód úspěšně proveden, zobrazí se následující výstup.
Výstup:
Z výstupu je vidět, že hodnota přiřazená proměnné pName je „Guru99“ a můžeme vidět, že ovládací prvek select input má možnosti „Controllers“ a „Models“.
Shrnutí
- Modely v Angular JS jsou reprezentovány direktivou ng-model. Primárním účelem této směrnice je spojit pohled s modelem. Jak vytvořit jednoduchý ovladač pomocí direktiv ng-app, ng-controller a ng-model.
- Direktivu ng-model lze propojit se vstupním ovládacím prvkem „textové oblasti“ a z ovladače do pohledu lze předávat víceřádkové řetězce.
- Direktivu ng-model lze propojit se vstupními ovládacími prvky, jako jsou ovládací prvky textu a zaškrtávacích polí, aby byly za běhu dynamičtější.
- Direktivu ng-model lze také použít k naplnění výběrového seznamu možnostmi, které lze zobrazit uživateli.
