Как использовать «ng-model» в AngularJS с ПРИМЕРАМИ

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

Что такое ng-модель в AngularJs?

ng-model — это директива в Angular.JS, которая представляет модели, и ее основная цель — привязать «представление» к «модели».

Например, предположим, что вы хотите представить конечному пользователю простую страницу, подобную той, что показана ниже, где пользователю предлагается ввести «Имя» и «Фамилию» в текстовые поля. И затем вы хотели убедиться, что вы сохраняете информацию, которую ввел пользователь, в вашей модели данных.

Вы можете использовать директиву ng-model для сопоставления полей текстового поля «Имя» и «Фамилия» с вашей моделью данных.

Директива ng-model гарантирует, что данные в «представлении» и вашей «модели» будут постоянно синхронизироваться.

ng-модель в AngularJS

Атрибут ng-model

Как обсуждалось во введении к этой главе, атрибут ng-model используется для привязки данных вашей модели к представлению, представленному пользователю.

Атрибут ng-model используется для:

  1. Привязка элементов управления, таких как ввод, текстовая область и выделение в представлении, к модели.
  2. Обеспечьте поведение проверки — например, в текстовое поле можно добавить проверку, при которой в текстовое поле можно будет вводить только числовые символы.
  3. Атрибут ng-model поддерживает состояние элемента управления (под состоянием мы подразумеваем, что элемент управления и данные должны всегда синхронизироваться. Если значение наших данных изменится, оно автоматически изменит значение в элементе управления и наоборот)

Как использовать ng-модель

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-модели используется для присоединения переменной-члена с именем «pDescription» в элемент управления «textarea». «pDescription» фактически будет содержать текст, который будет передан в элемент управления текстовой областью. Мы также упомянули два атрибута элемента управления textarea: rows=2 и cols=4. Эти атрибуты были упомянуты для того, чтобы мы могли отображать несколько строк текста. Определив эти атрибуты, текстовая область теперь будет иметь 50 строки и 4 столбцов, что позволит отображать несколько строк текста.
  2. Здесь мы присоединяем переменную-член к объекту области действия под названием «pDescription» и поместив строковое значение в переменную.
  3. Обратите внимание, что мы помещаем в строку литерал /n, чтобы текст мог состоять из нескольких строк, когда он отображается в текстовой области. Литерал /n разбивает текст на несколько строк, чтобы он мог отображаться в элементе управления textarea как несколько строк текста.

Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

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

Из вывода,

  • Хорошо видно, что значение, присвоенное pDescriptПеременная ion как часть объекта области была передана в элемент управления textarea.
  • Впоследствии он отображался при загрузке страницы.

2) Элементы ввода

Директиву ng-model также можно применять к элементам ввода, таким как текстовое поле, флажки, переключатели и т. д.

Давайте посмотрим на пример того, как мы можем использовать ng-модель с типом ввода «текстовое поле» и «флажок».

Здесь у нас будет тип ввода текста с именем «Guru99» и два флажка, один из которых будет отмечен по умолчанию, а другой не будет отмечен.

Элементы ввода в ng-модели

<!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-модели используется для присоединения переменной-члена с именем «pname» к текстовому элементу управления типа ввода. Переменная «pname» будет содержать текст «Guru99», который будет передан в элемент управления вводом текста. Обратите внимание, что имени переменной-члена может быть присвоено любое имя.
  2. Здесь мы определяем наш первый флажок «Контроллеры», который прикреплен к переменной-члену Topics.Controllers. Для этого элемента проверки будет установлен флажок.
  3. Здесь мы определяем наш первый флажок «Модели», который прикреплен к переменной-члену Topics.Models. Для этого элемента проверки флажок не будет установлен.
  4. Здесь мы присоединяем переменную-член под названием «pName» и помещаем строковое значение «Guru99».
  5. Мы объявляем переменную массива-члена под названием «Темы» и присваиваем ей два значения: первое — «истина», а второе — «ложь». Поэтому, когда первый флажок получает значение true, флажок будет отмечен для этот элемент управления, и аналогично, поскольку второе значение имеет значение false, флажок для этого элемента управления не будет отмечен.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Элементы ввода в ng-модели

Из вывода,

  • Хорошо видно, что переменной pName присвоено значение «Guru99».
  • Поскольку первое значение проверки «истина», оно прошло, флажок отмечен для флажка «Контроллеры». Аналогично, поскольку второе значение имеет значение false, флажок «Модели» не установлен.

3) Выберите элемент из раскрывающегося списка.

Директиву ng-model также можно применить к элементу выбора и использовать для заполнения элементов списка в списке выбора.

Давайте посмотрим на пример того, как мы можем использовать ng-модель с выбранным типом ввода.

Здесь у нас будет тип ввода текста с именем «Guru99», а также список выбора с двумя элементами списка: «Контроллер» и «Модели».

Выберите элемент из раскрывающегося списка в ng-модели

<!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-модели используется для присоединения переменной-члена под названием «Темы» к элементу управления типа выбора. Внутри элемента управления select для каждого параметра мы присоединяем переменную-член Topics.option1 для первого параметра и Topics.option2 для второго параметра.
  2. Здесь мы определяем переменную массива Topics, которая содержит две пары ключ-значение. Первая пара имеет значение «Контроллеры», а вторая — «Модели». Эти значения будут переданы для выбора входного тега в представлении. Если код выполнен успешно, будет показан следующий вывод.

Вывод:

Выберите элемент из раскрывающегося списка в ng-модели

Из выходных данных видно, что переменной pName присвоено значение «Guru99», и мы видим, что выбранный элемент управления вводом имеет параметры «Контроллеры» и «Модели».

Резюме

  • Модели в Angular JS представлены директивой ng-model. Основная цель этой директивы — привязать представление к модели. Как создать простой контроллер с помощью директив ng-app, ng-controller и ng-model.
  • Директиву ng-model можно связать с элементом управления вводом «текстовая область», а многострочные строки можно передавать из контроллера в представление.
  • Директиву ng-model можно связать с элементами управления вводом, такими как элементы управления текстом и флажком, чтобы сделать их более динамичными во время выполнения.
  • Директиву ng-model также можно использовать для заполнения списка выбора опциями, которые могут отображаться пользователю.

Вы могли бы: