Jak używać „ng-model” w AngularJS z PRZYKŁADAMI

Co to jest model ng w AngularJs?

ng-model to dyrektywa w Angular.JS, która reprezentuje modele, a jej głównym celem jest powiązanie „widoku” z „modelem”.

Na przykład, załóżmy, że chcesz przedstawić użytkownikowi końcowemu prostą stronę, taką jak pokazano poniżej, która prosi użytkownika o wpisanie „Imienia” i „Nazwiska” w polach tekstowych. A następnie chcesz się upewnić, że przechowujesz informacje, które użytkownik wprowadził w swoim modelu danych.

Za pomocą dyrektywy ng-model możesz zmapować pola tekstowe „Imię” i „Nazwisko” do swojego modelu danych.

Dyrektywa ng-model zapewni, że dane w „widoku” i „modelu” będą cały czas zsynchronizowane.

Atrybut modelu ng

Jak omówiono we wstępie do tego rozdziału, atrybut ng-model służy do powiązania danych w modelu z widokiem prezentowanym użytkownikowi.

Atrybut ng-model jest używany do:

Wiązanie elementów sterujących, takich jak wprowadzanie, obszar tekstowy i zaznaczenia w widoku, z modelem.
Zapewnij zachowanie walidacyjne – na przykład można dodać walidację do pola tekstowego, aby do pola tekstowego można było wprowadzać wyłącznie znaki numeryczne.
Atrybut ng-model utrzymuje stan kontrolki (przez stan rozumiemy, że kontrolka i dane muszą być zawsze zsynchronizowane. Jeśli wartość naszych danych ulegnie zmianie, automatycznie zmieni się wartość w kontrolce i odwrotnie)

Jak korzystać z modelu ng

1) Obszar tekstowy

Znacznik obszaru tekstowego służy do definiowania kontrolki wprowadzania tekstu wielowierszowego. Obszar tekstowy może pomieścić nieograniczoną liczbę znaków, a tekst jest renderowany czcionką o stałej szerokości.

Przyjrzyjmy się teraz prostemu przykładowi, jak możemy dodać dyrektywę ng-model do kontrolki obszaru tekstowego.

W tym przykładzie chcemy pokazać, jak możemy przekazać ciąg wielowierszowy z kontrolera do widoku i dołączyć tę wartość do kontrolki obszaru tekstowego.

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
	<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>

Wyjaśnienie kodu:

dyrektywa ng-model służy do dołączenia zmiennej składowej o nazwie „pDescription” do kontrolki „textarea”. Pole „pDescription” będzie faktycznie zawierać tekst, który zostanie przekazany do kontroli obszaru tekstowego. Wspomnieliśmy także o 2 atrybutach kontrolki obszaru tekstowego, którymi są rows=4 i cols=50. Atrybuty te zostały wspomniane, abyśmy mogli wyświetlić wiele wierszy tekstu. Po zdefiniowaniu tych atrybutów obszar tekstowy będzie teraz miał 4 wiersze i 50 kolumn, dzięki czemu będzie mógł wyświetlać wiele wierszy tekstu.
Tutaj dołączamy zmienną składową do obiektu zakresu o nazwie „pDescription” i umieszczenie wartości ciągu znaków w zmiennej.
Zwróć uwagę, że umieszczamy literał /n w ciągu, aby tekst mógł składać się z wielu wierszy, gdy jest wyświetlany w obszarze tekstowym. Literał /n dzieli tekst na wiele wierszy, aby mógł być renderowany w kontrolce textarea jako wiele wierszy tekstu.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

Wyraźnie widać, że wartość przypisana do pDescriptzmienna ion jako część obiektu zakresu została przekazana do kontrolki Textarea.
Następnie jest on wyświetlany po załadowaniu strony.

2) Elementy wejściowe

Dyrektywę ng-model można stosować również do elementów wejściowych, takich jak pole tekstowe, pola wyboru, przyciski radiowe itp.

Przyjrzyjmy się przykładowi, w jaki sposób można użyć ng-model z typem danych wejściowych „textbox” i „checkbox”.

Tutaj będziemy mieć typ wprowadzania tekstu o nazwie „Guru99” i będą tam 2 pola wyboru, jedno domyślnie zaznaczone, a drugie nie.

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pname"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
		<input type="checkbox" ng-model="Topic.Controller">Controller<br>&nbsp;&nbsp;&nbsp;
		<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>

Wyjaśnienie kodu:

dyrektywa ng-model służy do dołączania zmiennej członkowskiej o nazwie „pname” do kontrolki tekstowej typu wejściowego. Zmienna „pname” będzie zawierać tekst „Guru99”, który zostanie przekazany do kontroli wprowadzania tekstu. Należy pamiętać, że nazwie zmiennej składowej można nadać dowolną nazwę.
Tutaj definiujemy nasze pierwsze pole wyboru „Controllers”, które jest dołączone do zmiennej członkowskiej Topics.Controllers. Pole wyboru zostanie zaznaczone dla tej kontrolki check.
Tutaj definiujemy nasze pierwsze pole wyboru „Models”, które jest dołączone do zmiennej członkowskiej Topics.Models. Pole wyboru nie będzie zaznaczone dla tej kontrolki wyboru.
Tutaj dołączamy zmienną składową o nazwie „pName” i umieszczamy wartość ciągu „Guru99”.
Deklarujemy zmienną tablicy członkowskiej o nazwie „Topics” i nadajemy jej dwie wartości: pierwszą „true” i drugą „false”. Tak więc, gdy pierwsze pole wyboru uzyska wartość true, zostanie ono zaznaczone dla tej kontrolki, a ponieważ druga wartość jest false, pole wyboru nie zostanie zaznaczone dla tej kontrolki.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

Wyraźnie widać, że wartość przypisana do zmiennej pName to „Guru99”
Ponieważ pierwsza wartość kontrolna to „true”, pole wyboru jest zaznaczone dla pola wyboru „Controllers”. Podobnie, ponieważ druga wartość to false, pole wyboru nie jest zaznaczone dla pola wyboru „Models”.

3) Wybierz element z listy rozwijanej

Dyrektywę ng-model można również zastosować do elementu Select i użyć jej do wypełnienia elementów listy Select.

Spójrzmy na przykład, jak możemy użyć modelu ng z wybranym typem wejścia.

Tutaj będziemy mieli typ wprowadzania tekstu, który będzie miał nazwę „Guru99” i będzie lista wyboru z 2 pozycjami listy „Kontroler” i „Modele”.

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pName" value="Guru99"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
        
		<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>

dyrektywa ng-model służy do dołączania zmiennej członkowskiej o nazwie „Tematy” do kontrolki typu wybierz. Wewnątrz kontrolki Select dla każdej opcji dołączamy zmienną składową Topics.option1 dla pierwszej opcji i Topics.option2 dla drugiej opcji.
Tutaj definiujemy naszą zmienną tablicową Topics, która zawiera 2 pary klucz-wartość. Pierwsza para ma wartość „Controllers”, a druga ma wartość „Models”. Te wartości zostaną przekazane do znacznika wejściowego select w widoku. Jeśli kod zostanie wykonany pomyślnie, zostanie wyświetlony następujący Output.

Wyjście:

Z danych wyjściowych widać, że wartość przypisana do zmiennej pName to „Guru99” i widzimy, że kontrola wyboru wejścia ma opcje „Kontrolery” i „Modele”.

Podsumowanie

Modele w Angular JS są reprezentowane przez dyrektywę ng-model. Podstawowym celem tej dyrektywy jest powiązanie widoku z modelem. Jak zbudować prosty kontroler przy użyciu dyrektyw ng-app, ng-controller i ng-model.
Dyrektywę ng-model można powiązać z kontrolką wprowadzania „obszaru tekstowego”, a ciągi wielowierszowe można przekazywać z kontrolera do widoku.
Dyrektywę ng-model można powiązać z kontrolkami wejściowymi, takimi jak kontrolki tekstu i pola wyboru, aby zwiększyć ich dynamikę w czasie wykonywania.
Dyrektywę ng-model można również wykorzystać do wypełnienia listy wyboru opcjami, które mogą zostać wyświetlone użytkownikowi.

Co to jest model ng w AngularJs?

Atrybut modelu ng

Jak korzystać z modelu ng

1) Obszar tekstowy

2) Elementy wejściowe

3) Wybierz element z listy rozwijanej

Podsumowanie

Zapisz się do newslettera