Как да използвате „ng-model“ в AngularJS с ПРИМЕРИ

Какво е ng-модел в AngularJs?

ng-model е директива в Angular.JS, която представлява модели и нейната основна цел е да обвърже „изгледа“ с „модела“.

Да предположим например, че искате да представите проста страница на крайния потребител като тази, показана по-долу, която иска от потребителя да въведе „Собствено име“ и „Фамилно име“ в текстовите полета. И тогава искате да сте сигурни, че съхранявате информацията, която потребителят е въвел във вашия модел на данни.

Можете да използвате директивата ng-model, за да съпоставите полетата на текстовото поле на „Собствено име“ и „Фамилно име“ към вашия модел на данни.

Директивата ng-model ще гарантира, че данните в „изгледа“ и тези на вашия „модел“ се поддържат в синхрон през цялото време.

ng-модел в AngularJS

Атрибутът ng-model

Както беше обсъдено във въведението към тази глава, атрибутът ng-model се използва за обвързване на данните във вашия модел с изгледа, представен на потребителя.

Атрибутът ng-model се използва за,

  1. Свързване на контроли като въвеждане, текстова област и селекции в изгледа в модела.
  2. Осигурете поведение на валидиране – например валидиране може да се добави към текстово поле, че само цифрови знаци могат да се въвеждат в текстовото поле.
  3. Атрибутът ng-model поддържа състоянието на контролата (Под състояние имаме предвид, че контролата и данните са длъжни винаги да се поддържат в синхрон. Ако стойността на нашите данни се промени, тя автоматично ще промени стойността в контролата и обратно)

Как да използвате ng-model

1) Текстова област

Тагът за текстова област се използва за дефиниране на многоредова контрола за въвеждане на текст. Текстовата област може да съдържа неограничен брой знаци и текстът се изобразява с шрифт с фиксирана ширина.

И така, нека сега да разгледаме един прост пример за това как можем да добавим директивата ng-model към контрола на текстова област.

В този пример искаме да покажем как можем да предадем многоредов низ от контролера към изгледа и да прикрепим тази стойност към контролата на текстовата област.

Текстова област в ng-модел

<!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>

Обяснение на кода:

  1. - директива ng-model се използва за прикачване на членската променлива, наречена „pDescription” към контролата “textarea”.Description” всъщност ще съдържа текста, който ще бъде предаден на контролата на текстовата област. Също така споменахме 2 атрибута за контролата на текстовото поле, което е rows=4 и cols=50. Тези атрибути са споменати, за да можем да покажем няколко реда текст. Чрез дефинирането на тези атрибути текстовото поле вече ще има 4 реда и 50 колони, така че да може да показва множество редове текст.
  2. Тук прикрепяме членската променлива към обекта на обхвата, наречен „pDescription” и поставяне на низова стойност към променливата.
  3. Имайте предвид, че поставяме литерала /n в низа, така че текстът да може да бъде от няколко реда, когато се показва в текстовата област. Литералът /n разделя текста на няколко реда, така че да може да се рендира в контролата textarea като няколко реда текст.

Ако кодът се изпълни успешно, следният изход ще бъде показан, когато стартирате кода в браузъра.

Изход:

Текстова област в ng-модел

От изхода,

  • Може ясно да се види, че стойността, присвоена на pDescription променлива като част от обекта на обхвата беше предадена на контролата textarea.
  • Впоследствие се показва при зареждане на страницата.

2) Входни елементи

Директивата ng-model може да се приложи и към елементите за въвеждане като текстово поле, квадратчета за отметка, радио бутони и др.

Нека да разгледаме пример за това как можем да използваме ng-модела с типа на въвеждане „текстово поле“ и „кутия за отметка“.

Тук ще имаме тип въвеждане на текст, който ще има името „Guru99“ и ще има 2 квадратчета за отметка, едното ще бъде маркирано по подразбиране, а другото няма да бъде маркирано.

Входни елементи в ng-model

<!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>

Обяснение на кода:

  1. - директива ng-model се използва за прикачване на членската променлива, наречена „pname“, към текстовата контрола на входния тип. Променливата “pname” ще съдържа текста на “Guru99”, който ще бъде предаден на контролата за въвеждане на текст. Имайте предвид, че всяко име може да бъде дадено на името на членската променлива.
  2. Тук дефинираме нашето първо квадратче за отметка „Контролери“, което е прикачено към членската променлива Topics.Controllers. Квадратчето за отметка ще бъде маркирано за тази контрола за отметка.
  3. Тук дефинираме нашето първо квадратче за отметка „Модели“, което е прикачено към членската променлива Topics.Models. Квадратчето за отметка няма да бъде маркирано за тази контрола за отметка.
  4. Тук прикачваме членската променлива, наречена „pName“ и поставяме стойност на низ „Guru99“.
  5. Декларираме променлива на членски масив, наречена „Теми“ и й даваме две стойности, първата е „true“, а втората е „false“. Така че, когато първото квадратче за отметка получи стойност true, квадратчето за отметка ще бъде маркирано за тази контрола и по същия начин, тъй като втората стойност е false, квадратчето за отметка няма да бъде маркирано за тази контрола.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

Входни елементи в ng-model

От изхода,

  • Може ясно да се види, че стойността, присвоена на променливата pName, е „Guru99“
  • Тъй като първата стойност за проверка е „истина“, тя е преминала, квадратчето за отметка е маркирано за квадратчето „Контролери“. По същия начин, тъй като втората стойност е false, квадратчето за отметка не е маркирано за квадратчето за отметка „Модели“.

3) Изберете елемент от падащото меню

Директивата ng-model може също да се приложи към елемента за избор и да се използва за попълване на елементите от списъка в списъка за избор.

Нека да разгледаме пример за това как можем да използваме ng-модела с избрания тип вход.

Тук ще имаме тип въвеждане на текст, който ще има името „Guru99“ и ще има списък за избор с 2 елемента от списък на „Контролер“ и „Модели“.

Изберете елемент от падащото меню в ng-model

<!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>
  1. - директива ng-model се използва за прикачване на членската променлива, наречена „Теми“, към контролата за избор на тип. Вътре в контролата за избор, за всяка от опциите, ние прикачваме членската променлива на Topics.option1 за първата опция и Topics.option2 за втората опция.
  2. Тук дефинираме нашата променлива за масив Теми, която съдържа 2 двойки ключ-стойност. Първата двойка има стойност „Контролери“, а втората има стойност „Модели“. Тези стойности ще бъдат предадени за избор на таг за въвеждане в изгледа. Ако кодът се изпълни успешно, ще се покаже следният изход.

Изход:

Изберете елемент от падащото меню в ng-model

От изхода може да се види, че стойността, присвоена на променливата pName, е „Guru99“ и можем да видим, че контролът за избор на вход има опциите „Контролери“ и „Модели“.

Oбобщение

  • Моделите в Angular JS са представени от директивата ng-model. Основната цел на тази директива е да обвърже изгледа с модела. Как да изградите прост контролер с помощта на директивите ng-app, ng-controller и ng-model.
  • Директивата ng-model може да бъде свързана с контрола за въвеждане на „текстова област“ и многоредовите низове могат да бъдат предавани от контролера към изгледа.
  • Директивата ng-model може да бъде свързана с контроли за въвеждане като контроли за текст и поле за отметка, за да ги направи по-динамични по време на изпълнение.
  • Директивата ng-model може също да се използва за попълване на списък за избор с опции, които могат да бъдат показани на потребителя.